Adding two Text widgets to an Action Hook
-
Hi,
I would like to use an action hook widget to add two HTML image/links, one floating left, the other right, neatly above my header. Since I have two HTML codes for the same Action Widget which I assume is – header.php graphene_container_before , should I use the Advanced method as per Josh’s tutorial or is there an easy way to avoid messing with divs and php?
Thanks,
Hillary
Mod
Quote:as per Josh’s tutorialYou might want to provide a link so we know exactly what you are referring to .
Quote:is there an easy way to avoid messing with divs and php?You can avoid messing with php, but if you want two different widgets to appear in two different places, you will need to identify the unique ID for each one and target your css at those id’s.
Thanks for your quick reply Kenneth. Josh Lobe has several wonderful videos on YouTube relating to Graphene Action Hooks. The advanced tutorial is at http://www.youtube.com/watch?v=NkAik-GZToM
I’m going to follow it step by careful step as I believe i will need to add functions to my Functions php. as well adding the related codes to my CSS stylesheets.
Quote:I believe i will need to add functions to my Functions phpNope. You can control the placement of widgets strictly with CSS. No PHP needed.
Quote:as well adding the related codes to my CSS stylesheets.I hope you mean “Graphene’s Custom CSS feature” or “child theme stylesheet”. You shouldn’t edit theme files directly.
Ah, float is not easy to master. w3 schools has good tutorials and sandboxes: http://w3schools.com/cssref/pr_class_float.asp
Don’t worry about that.
Everything in WordPress gets a unique css ID. You can use the Firebug addon for Firefox to find out what that ID is, and then target that ID using custom css.
That custom css either goes in Graphene’s custom CSS feature, or in your child theme stylesheet. Do not put CSS in a functions.php file; that for php only.
If you visit my blog with Firebug, you will see that the top widget (“Browser Check”) has an ID of
php_widget-11. So if I want to style that widget and that widget only, I will target it with CSS like this:#php_widget-11 {property: value;}Strictly CSS. No HTML (other than what you enter in the widget itself), and no PHP.
Hi Ken,
Well I gave it a try. It appears that the id’s for my html banners are text-6 and text-8, so I added the CSS codes into Graphene’s Custom CSS feature like this:
#text-6 {float: left;
padding-bottom: 10px;
padding-top: 10px;
}
#text-8 {float: right;
padding-bottom: 10px;
padding-top: 10px;
} my id
It think I’m almost there. The banners are floating left and right, but the’re not sitting directly above the header as I would like. Worse is that now I have a <div id=”top-bar”> bocking the banners. You can see it at http://ecigarettenews.net. It appears differently in different browsers.
Thanks!
Hillary
- 1
- 2
- You must be logged in to reply to this topic.
