Return to Support

Graphene Action Hook CSS

Home Forums Graphene WordPress theme Support Graphene Action Hook CSS

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #8564
    hilmil
    Participant

    Hi,

    I use the Graphene Container Before action hook with

    <div class="top_banner_ads">
    <div class="top_banner_ad_left">

    and

    <div class="top_banner_ad_right">

    I had the correct custom css code which placed my 2 ads neatly above the site header with one banner left and the other right; but the other day, when experimenting with different sidebars, the CSS disappeared from my Custom CSS box. Now both banners are stacked over the left background.

    My site is http://ecigarettenews.net

    Can you tell me what css code to enter to get the banners back in one line above the header?

    Thanks!

    Hillary

    #41468
    Prasanna SP
    Member
    .top_banner_ad_right {
    float: right;
    margin-right: 174px;
    }
    .top_banner_ad_left {
    float: left;
    margin-left: 174px;
    }

    Put code in between backtick (

    Code:
    `

    ) characters here. It’s usually located above the Tab key on your keyboard.

    #41469
    hilmil
    Participant

    Thanks! That code got me started 🙂

    I just had to play with the margin px’s and added a margin-top: 5px;

    Now it’s perfect and back to where it should be.

    Hillary

    #41470
    hilmil
    Participant

    Hi Prasanna,

    I’m back as I noticed a slight problem with my above header banners. Their positions don’t stick “flush” right and left above the header. if I change the size of my browser screen, they move with it. If I make the browers narrower, they stack. Any suggestions?

    Thanks again!

    #41471
    Quote:
    if I change the size of my browser screen, they move with it. If I make the browers narrower, they stack.

    This is the nature of the float property: items float with the container that they are in. It’s possible (probable, even) that they were doing this before, but you didn’t notice. There’s no real way around that aspect of it, afaik.

    The real problem is not when the browser window is too narrow, but when it’s too wide, because the ads will float outside the width defined by the main container.

    The solution here is to make the #graphene-dynamic-widget-graphene_container_before widget the size you need, and then position the ad widgets relative to that:

    #graphene-dynamic-widget-graphene_container_before {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    }

    .top_banner_ad_left {
    float: left;
    left: 0;
    position: relative;
    top: 5px;
    }

    .top_banner_ad_right {
    float: right;
    position: relative;
    right: 0;
    top: 5px;
    }

    #container {
    margin-top: 10px;
    }

    I’ve also added a bit of margin to #container to provide a bit of room for the ad widgets.

    This works in Firebug, but I haven’t tested it on a live site.

    #41472
    hilmil
    Participant

    Yes that did the trick! Thanks Kenneth and have a Merry Christmas!

    Hillary

    #41473

    Cheers!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.