Adding a Leaderboard to Focus Header

Community Forums Forums Design Tips and Tricks Adding a Leaderboard to Focus Header

This topic is: not resolved

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Anita 1 year, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #54180

    Maddog
    Participant
    Post count: 4

    Hi all,

    I would like to add a leaderboard to the Focus theme header. I would like my logo on the left and the ad flush right.

    What is the best way to accomplish this?

    I tried using the Header Right widget, however it appears half on the page half off.
    Ideally the Leaderboard would appear when the site is full size (But either scale for cell phones or either not appear on phones if that’s not possible)

    Thanks for any help you can provide!
    Regards,

    #54206

    Anita
    Blocked
    Post count: 7712

    Please post a link to your site so we can take a look. But in looking at the demo of Focus, you need to modify the css of the header right widget. Look for this and make whatever changes you want:

    [css]#header .widget-area {
    float: right;
    padding: 25px 20px 0 0;
    width: 530px;
    }[/css]

    You will need to also make adjustments to the Title Area since you are widening the header right area:

    [css]#title-area {
    float: left;
    overflow: hidden;
    padding: 15px 0 0;
    width: 400px;
    }[/css]

    From my personal experience, depending on what type of content you are looking to have respond in the header right, please note that Google Adsense will not respond, so it’s best to use an HTML based ad code. If you want it to show up in the header but not on mobile devices, you will need to add that to the responsive design css or media queries.

    #55617

    Maddog
    Participant
    Post count: 4

    Hi Anitac,

    I think you can now make Adsense responsive to a certain degree with the beta ad unit below.

    http://adsense.blogspot.com.au/2013/07/the-responsive-web-adsense.html

    Should I change the code to look like below?

    #header .widget-area {
    float: right;
    padding: 25px 20px 0 0;
    width: 728px;
    }

    #title-area {
        float: left;
        overflow: hidden;
        padding: 15px 0 0;
        width: 202px;
    }

    Regards,

    #55622

    Anita
    Blocked
    Post count: 7712

    Thanks for sharing that. The previous code was Javascript and it interferred with sliders working. I cannot give you specific CSS instruction because I don’t know what theme you are using and you’ve never provided a URL to your website.

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

You must be logged in to reply to this topic.