Which action hook will let me add content to the left or right side of a page?

  • ianizaguirre

    #7404

    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

    Mod

    Kenneth John Odle

    #38077

    You can use Graphene’s header widget. It’s unstyled, so you can style it to position it.

    http://forum.khairul-syahir.com/graphene-support/how-can-i-add-adsense-to-the-background-image-1#post-5040

    Use a separate <div> with a unique ID for each one to add left and right.

    ianizaguirre

    #38078

    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

    Mod

    Kenneth John Odle

    #38079

    Create 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 the top, left, and right properties as you like.

    ianizaguirre

    #38080

    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 ?

    Mod

    Kenneth John Odle

    #38081
    Quote:
    ok but In Internet explorer it works but in firefox its invisible and google chrome

    Well, 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.

    ianizaguirre

    #38082

    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>

    ianizaguirre

    #38083

    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;
    }
    Mod

    Kenneth John Odle

    #38084

    Now you’ve got it!

    Btw, there’s an extra full stop here:

    ..header-widget {

    It should be

    .header-widget {

    ianizaguirre

    #38085

    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)

You must be logged in to reply to this topic.