Which action hook will let me add content to the left or right side of a page?
-
I want to add content outside the content area like to the left and right of where the background lies ?
****Please remove my other post of the same topic by mistake I posted it on the mobile support side and I can’t view the response
ModYou can use Graphene’s header widget. It’s unstyled, so you can style it to position it.
Use a separate
<div>
with a unique ID for each one to add left and right.as an example im using this and I cant make it move?
#text-24 {
left: 50px;
position: fixed;
top: 50px;
}and I don’t understand what you said about the <div> ? Thanks for your help
ModCreate two separate text widgets in the header widget.
In the one you want to appear on the left, use code like this:
<div id="header-widget-left">
HTML stuff goes here
</div>In the one you want to appear on the right, use code like this:
<div id="header-widget-right">
HTML stuff....
</div>Now, in your custom CSS, add something like:
#header-widget-left {
position: fixed;
top: 10px;
left: 10px;
}
#header-widget-right {
position: fixed;
top: 10px;
right: 10px;
}position:fixed
will keep whatever you add here in the same position on the page. You can adjust thetop
,left
, andright
properties as you like.ok but In Internet explorer it works but in firefox its invisible and google chrome it still shows inside the header not moved? but on your website its visible on all 3 ?
ModQuote:ok but In Internet explorer it works but in firefox its invisible and google chromeWell, there’s something you hardly ever hear. 😉
Quote:it still shows inside the header not moved? but on your website its visible on all 3 ?That’s because I’m using the Graphene header widget, not an action hook widget area. Go to
Graphene Options >> General Options >> Widget Area Options
and tick the box marked “Enable header widget area”.
Navigate to your widgets pane. You should see a widget area labeled “Header Widget Area”. Drag a couple of text widgets there and proceed as above.
ok I did what you said I still have the exact same problem, invisible on fire fox, wrong place on chrome, perfect on internet explorer.
I think it might have to do with a div class error maybe because I was playing around with it on firebug and it showed but then it dident work when I pasted the code on css
if this helps your site looks like this from one part to one part
<div id="container" class="container_16">
<div id="top-bar">
<div id="header">
<img class="header-img" alt="" src="http://blog.kjodle.net/wp-content/uploads/2011/08/header.jpg">
<div class="header-widget">
<div id="text-5" class="sidebar-wrap clearfix widget_text">
<div class="textwidget">
<div class="donate">
</div>
</div>Mine looks like this
<div id="container" class="container_16">
<div id="top-bar">
<div id="header">
<img class="header-img" alt="" src="http://iamdentistry.com/wp-content/uploads/2013/04/blue-logo-style.png">
<div class="header-widget">
<div id="text-24" class="sidebar-wrap clearfix widget_text">
<div class="textwidget">
<div id="header-widget-left">
<p style="text-align: center;">
<img class="wp-image-548" width="93" height="93" src="http://iamdentistry.com/wp-content/uploads/2013/03/IamDentistry_CustomLogoDesign_Black-e1362260286606.png" alt="IamDentistry_CustomLogoDesign_Black" style="border: 0px currentColor;">
</p>
</div>
</div>the left and right widget area works on fir fox now , and Internet explorer just not on Google chrome
This is my text area widget text
<div id="header-widget-right">
<p style="text-align: center;"><img class="wp-image-548" style="border: 0px currentColor;" alt="IamDentistry_CustomLogoDesign_Black" src="http://iamdentistry.com/wp-content/uploads/2013/03/IamDentistry_CustomLogoDesign_Black-e1362260286606.png" width="93" height="93" /></p>
</div>This is my CSS code
/* formats header widget left position for location outside of content area on background*/
#header-widget-left {
position: fixed;
top: 10px;
left: 10px;
}
/* formats header widget right position for location outside of content area on background*/
#header-widget-right {
position: fixed;
top: 10px;
right: 10px;
}
/* formats header widget position general for location outside of content area on background*/
..header-widget {
position:fixed;
top:10px;
left:10px;
}ModNow you’ve got it!
Btw, there’s an extra full stop here:
..header-widget {
It should be
.header-widget {
yea I fixed that full stop but it still does not work in google chrome? how can I fix this ?
yours works in google chrome , but mine in google chrome just stays inside the header and only the left shows
Thank you so much
Viewing 10 posts - 1 through 10 (of 13 total)
- 1
- 2
- You must be logged in to reply to this topic.