Support » Themes and Templates » add a horizontal bar to show ad

  • Resolved getchanu

    (@getchanu)


    Hi Friends,

    I am using the Silesia theme for my blog(www.techiedreams.com)
    I want to have a ad space above the content as(www.9lessons.info)
    condition is it should have the same width(see my blog where the breadcrumb is shown just above that with same width) of the content with some background color.

    I tried inserting the ad code above the content it hides all the content.
    I need to have a separate div for that customizing the color etc. from the css.

    Please guide me what code to be added to css and where to keep the ad code. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You have this HTML already

    <div id="cnt" class="wrapper">
      <div class="top">
        <ul id="crumbs"><li class="first"><a href="http://techiedreams.com" id="home-img"></a></li><li>Home</li></ul>    <div class="clear"></div>
      </div> <!-- END top -->

    Add a div with an id of ads

    <div id="cnt" class="wrapper">
      <div class="top">
        <div id="ads">
         <!-- ADS go here -->
        </div>
        <ul id="crumbs"><li class="first"><a href="http://techiedreams.com" id="home-img"></a></li><li>Home</li></ul>    <div class="clear"></div>
      </div> <!-- END top -->

    In the bottom of your style.css file (assuming you’re using a child-theme), add

    #ads{
    //This is the height of the adverts on 9lessons Programming
    height: 118px;
    }

    for instance, add the code before this line:
    <div id="cnt" class="wrapper">
    (that might be in header.php – I am not going to download the theme to check)

    example:
    <div class="header-ads">ADCODE</div>

    this or something similar goes into style.css:
    .header-ads {width:100%;height:90px;background:#f4f4f4;border-bottom:2px solid #eee;text-align:center;}

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I wouldn’t add the code before this line:
    <div id="cnt" class="wrapper">
    Because it won’t follow the same width as your blog, or breadcrumb

    Because it won’t follow the same width as your blog, or breadcrumb

    debatable, if you look at the ad alignment in the sample site;
    but this is not for me to judge – I leave this to @getchanu

    Super guys thanq for your valuable replies. I achieved this doing some R & D. Anyways thanks again. The Process was just like the Andrew Nevins
    said. Where i have a separate div with id = ‘adbar’ and another div inside it with class = ‘ad’.

    My css is as follows:

    #adbar {
    background-color: #CCCCCC;
    margin: 5px 0px 0px 0px;
    width: 980px;
    height: 30px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    #adbar .ad {
    padding:6px;
    margin-left:10px;
    width: 980px;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘add a horizontal bar to show ad’ is closed to new replies.