Help please with positioning HTML code for banner/adsense add in WordPress Theme

HTML & CSS
1

Help please with positioning HTML code for banner/adsense add in WordPress Theme

classified-thailand dot biz

I am trying to place the html code in the correct place to display a banner or adsense code,

Yet so far I have not been successful.

Here is a Screen pic showing where I want to position the adds, right, and left.

Could someone help me finding the correct position to add the html, and css.

<div class="adsenseRight">

    <a target="_blank" href="http://www.google.com">
        <img width="160" height="300" border="0" alt="Premium WordPress Themes - AppThemes" src="http://classified-thailand.biz/wp-content/themes/classipress/images/ad125b.gif"></img>
    </a>

</div>

#adsenseRight div { /*adsenseRight div*/

 float:left;
  padding: 0 0 0 0;
  display:inline;
}
2

Try this:



#adsenseLeft,
#adsenseRight { 
    float:left;
    width:125px; height:125px; 
    padding: 0;
}
#adsenseRight {
  float:right;
}

<div id="adsenseLeft">
     <a href="http://www.google.com">
         <img alt="Premium WordPress Themes - AppThemes" 
                      src="http://classified-thailand.biz/wp-content/themes/classipress/images/ad125b.gif"
         />
    </a>
</div>

<div id="adsenseRight">
      <a href="http://www.google.com">
           <img alt="Premium WordPress Themes - AppThemes" 
                   src="http://classified-thailand.biz/wp-content/themes/classipress/images/ad125b.gif" 
           />
      </a>
</div>

Most of your problem was declaring an id and calling a class

3

Hello John, thank you for your fast very helpful reply,

Yes I see what you mean id, and class,

My problem now is placing the html into the correct place, or page php.

When I Inspect Element I am told the area I want is within content, or content_botbg,

Yet so far I am unable to find what page php to paste it into ? index.php, page.php, sidebar.php

you help would be greatly appreciated,

:slight_smile:

4

I am out at the moment and will not be back onto the desktop for about six hours, so unable to help.

The divs are not necessary by the way, the ids could be applied to the images.

5

Hi John,

Yes surround the code with divs is the only way I know, yet interested in knowing how to css it with out divs.

When you do get time to look at where the html should be placed, that would be most appreciated,

I have tried many pages and positions with out joy,

:slight_smile:

6

Hi John,

An update, I have the Left and Right Ad boxes showing on the Home page now, I added the HTML into the Index.php

classified-thailand dot biz

But, now they need a container to stop them floating hard right, and hard left, against the screen sides.

your help appreciated :slight_smile:

7

Try this:

The colours are just for testing the layout

8

Hi John,

You are too fast for me, I changed themes for a while, so now i am back to the theme I was wanting the add boxes on.

Apologies, please look at classified-thailand dot biz to see the theme I am trying to add ads to :slight_smile:

Yes in your http://www.johns-jokes.com/downloads/sp-c/RayWilk/ the 125x125 are positioned well, just as I was hoping for,

But the the green box is hard against the left/right.

Thank you John for your help :slight_smile:

9

I have updated my site. Removed float and centered the content box, it seems better to me.

Search the source code for “light” to find the changes.

10

Hi John,

Thank you for your changes/help,

When I load your http://www.johns-jokes.com/downloads/sp-c/RayWilk/ I see the widgets Popular, Blog Categories, Tags have been pushed down due to the width of the green box, thats ok the width of the green box can be reduced.

I have a screen pic here showing where I would like the 125x125 boxes to be located, black boxes, and maybe an extra limiting container needs to be added to stop the 125x125 moving to the hard right or hard left.

If I have missed some thing please tell me, as it is now 11 pm here, and my brain tired/fading :slight_smile:

Thank you John :slight_smile:

11

Hi Ray,

I have made some minor tweaks to the page, The tweaks can be found by viewing the source and searching for “light” without quotes. The padding dimensions can be modified to suit your requirements.

Please note that styles have been added are kludges which will no doubt upset the responsive design.

Did you purchase this theme and have you asked the author for modifications?

12

Hi John,

Thank you for your changes/help,

Ok all is looking good, great idea to have the green background to make placement much clearer :slight_smile:

please have a look at: classified-thailand dot biz

I am using <div> around my Adsense script, and I would like to create a 120x240 border, yet at the moment you will see my border includes the padding size.

How to add the border to the Adsense 120x240 ?

Thank you John for all your help :slight_smile:

13

I have updated my site with some changes.

Please note that the page is responsive any small changes create havoc with the layout.

This is a commercial script so I recommend requesting changes from the original author.

To add a 120x240px border requires the following margin and border styles to be changed.
Test your changes in different browser widths and continue until you get the desired result.



<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- 120x600_Skyscraper -->
      <ins class="adsbygoogle"
           
           id="adsenseRight-to-be-stored-in-appropriate-css-file-once-style-is-correct" 
style="display:inline-block; width:120px; height:600px; float:right; margin:0; padding:0; background-color: lightblue"

           data-ad-client="ca-pub-9269549700663152"
           data-ad-slot="1376382322"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

Best of luck and looking forward to seeing your final results.

14

Hi,

Apologies for jumping in but perhaps you may want to accommodate the smaller screen by either hiding the ads or perhaps squeezing then into the side.

e.g.


#adsenseLeft ,
#adsenseRight{
padding:0;
margin:5em 1em 1em 4em;
float:right;
border:2px solid #d8d8d8;
}

#adsenseLeft{
margin:5em 1em 1em 1em;
float:left;
}

@media screen and (max-width:800px){
#adsenseLeft ,
#adsenseRight{
/*display:none; if you just want to hide them uncomment this and remove the rules below */
float:left;
clear:left;
margin:0;
}
.content_left{margin-left:120px;width:auto}
}

That will allow the smaller than 800px width not to overlap the ads.

15

Hi John,

Thank you for those css changes/help, I will experiment and find the look/positioning I like.

So the adsense is displaying fine on classified-thailand dot biz the site I use to test themes and changes,

So I added the html and css to the site I want the adsense on food-trucks-for-sale dot com but! they do not show/display, I tried deleting cache yet nope nothing,

I tried different browsers, but nope nothing,

Do you have any ideas?

Thank you John for all your help :slight_smile:

16

Hello Paul,

Thank you for your jump in :slight_smile: much appreciated,

I was wondering what would happen on larger screens, so your small screens concerns are a good idea :slight_smile:

This is the css I currently have, set out that way because the padding is different right to left sides,

#adsenseRight { /* Left Side of screen */
float:left;
width:120px; height:600px;
padding: 20em 1em 1em 4em;

}
#adsenseLeft { /* Right Side of screen */
float:right;
width:120px; height:600px;
padding: 20em 4em 1em 1em;
}

17

Hi Ray,

Yes the code I gave you applies different padding to each side. I also made sure that adsense left is actually on the left and not floated right lol :slight_smile: (and vice versa). I have it working on your live site with css terminal and the code is working fine as an over-ride.

18

Don’t forget to move the content left in the media query and set its width to auto or it will overlap the ad.:wink:


@media screen and (max-width:800px){
#adsenseLeft ,
#adsenseRight{
/*display:none; if you just want to hide them uncomment this and remove the rules below */
float:left;
clear:left;
margin:0;
}
[B].content_left{margin-left:120px;width:auto}[/B]
}
19

Hello Paul,

Ok I have implemented your code, and all is looking good :slight_smile:

#adsenseLeft ,
#adsenseRight{
padding:0;
margin:5em 4em 1em 1em;
float:right;

}

#adsenseLeft{
margin:5em 1em 1em 4em;
float:left;
}

@media screen and (max-width:800px){
#adsenseLeft ,
#adsenseRight{
/*display:none; if you just want to hide them uncomment this and remove the rules below */
float:left;
clear:left;
margin:0;
}
.content_left{margin-left:120px;width:auto}
}

Now to have the Adsense ads not display if the screen width is less than 800 px I should have this?

#adsenseLeft ,
#adsenseRight{
padding:0;
margin:5em 4em 1em 1em;
float:right;

}

#adsenseLeft{
margin:5em 1em 1em 4em;
float:left;
}

@media screen and (max-width:800px){
#adsenseLeft ,
#adsenseRight{
display:none;
}

Is that correct ? :slight_smile:

20

Yes the important is the media query which should follow after the original rules.



@media screen and (max-width:800px){
#adsenseLeft ,
#adsenseRight{
display:none;
}

That will set the display of those elements to none when the screen is less than 800px which is where your display switches to one one column.

Edit:

Sorry didn’t mean to tread on Johns’ toes as he was doing a good job :slight_smile: