WordPress.org

Ready to get started?Download WordPress

Forums

Hueman
[resolved] Code to move over banner ad in header (22 posts)

  1. karenstl
    Member
    Posted 6 months ago #

    Using a couple of other threads, I figured out how to add some code to my header.php file (since I don't know how to work with child themes) to add a banner to my header. Then I added CSS so the banner doesn't show on mobile or tablets.

    But the banner is left justified under the logo, and I want it right justified with a little padding from the right edge and in line with the logo.

    What CSS do I need to fix that? Or do I need to move where I placed the code in the header.php file (or change the code there)?

    http://futureexpat.com

  2. Bosco Carvalho
    Member
    Posted 6 months ago #

    @karenstl

    Did you put
    .ads-header-desktop {
    display: block;
    float: right;
    margin-right: 5px;
    margin-top: -95px;
    }
    on Custom.css as aeroomkar suggested?

    Just for you to see how it works, I placed the code on Custom.css with this changes:

    .ads-header-desktop {
    display: block;
    float: right;
    margin-right: 20px;
    margin-top: -115px;
    }

    By the way: doing that the template could loose it's responsiveness on smartphones.

    Check it out on my page: http://www.revistaecologica.com

  3. karenstl
    Member
    Posted 6 months ago #

    Bosco -

    I hadn't seen that code. Thanks, I added your version (second code above) to the CSS and it worked great on the desktop version.

    I used the code the theme designer recommended in another thread so it wouldn't show on mobile, but it is showing on my iPhone so this code needs to be tweaked.

    .ads-header-desktop { display: block; }

    @media only screen and (max-width: 800px) {
    .ads-header-desktop { display: none; }
    }

    Any suggestions on how to change this code so the header banner ad only shows on the desktop version?

  4. karenstl
    Member
    Posted 5 months ago #

    Thanks again. The banner is showing perfectly with Bosco's code on the desktop. Still need to get it to now show on the cell phone...

    http://futureexpat.com

  5. DMBarber
    Member
    Posted 5 months ago #

    This is untested. Try changing screen to handheld and removing the max-width if you only want to keep it off of mobile devices so it looks like:

    @media only handheld {
    .ads-header-desktop { display: none; }
    }

  6. karenstl
    Member
    Posted 5 months ago #

    Good try...but didn't work. Still showing up on my iPhone.

  7. Alexander Agnarson
    Member
    Theme Author

    Posted 5 months ago #

    Are you using the phone in landscape or portrait when the ads show up?

    The code that you use here:

    @media only screen and (max-width: 800px) {
    .ads-header-desktop { display: none; }
    }

    Means that IF the screen is any smaller than 800px width, it will hide it. So you can just adjust the 800px value as you wish. I'm not sure what iPhone you have, but look up the screen resolution for that model to see when to hide it.

  8. karenstl
    Member
    Posted 5 months ago #

    I've got an iPhone 5 and the banner ad shows up even in portrait mode. I've added your code above to my css and it isn't hiding the ad on the phone.

    I've decided to move the banner ad to between the top bar and the logo. I managed to do this by moving the code up in the header.php file but can't seem to get the banner ad to center.

    http://futureexpat.com/

    In my css file, I added the code:
    .ads-header-desktop {
    display: block;
    float: none;
    margin-top: 15px;
    }

    1) I just want it centered and a small gap between the top bar and the ad. What am I doing wrong with this code?

    2) Since I can't seem to make the banner ad disappear on the phone, is it possible to make it responsive so it shrinks down to fit the screen width? If I can do this, I would actually prefer it.

  9. Bosco Carvalho
    Member
    Posted 5 months ago #

    Karen,

    To center it, add: <center> YOUR CODE </center>

    You can even use the responsive ad code from Adsense, with better optical results than the actual size.

    That's all.

    Have fun!

  10. DMBarber
    Member
    Posted 5 months ago #

    <center> has been deprecated as of html5. It is not suggested to use that. Instead, open your header.php file and wrap your code a in div with a class of your choice, like "bannerDiv". Here is an example:

    <div class="bannerDiv">
      [YOUR CODE HERE]
    </div>

    Then to center add this in your css file:

    .bannerDiv {
    width: 728px;
    margin: 2% auto;
    }

    As far as making it responsive, you will have to look at the code that you are using to add the banner. When the element is placed an inline style element is added (728px). If you can change this, then you can make it responsive. Let us know if you can and I will try to walk you through the changes to your css.

  11. karenstl
    Member
    Posted 5 months ago #

    That worked!

    Thanks DMBarber.

    Alex had already had me add the class as ".ads-header-desktop" to the header file and some CSS for this class, so I just added the width and margin to it.

    For anyone else wanting to do this, the css is:

    .ads-header-desktop {
    display: block;
    float: none;
    margin-top: 15px;
    width: 728px;
    margin: 2% auto;
    }

    And the code below added to the header.php file just above <div class="container group"> towards the top of the file.

    <div class="ads-header-desktop"><Your Adsense code here></div>

    Now to see if I can get the code to be responsive from Adsense since I can't get it to not show on my phone.

  12. Bosco Carvalho
    Member
    Posted 5 months ago #

    @DMBarber,

    Thanks for the hint about <center> no being supported on HTML5.
    But worked fine for my needs.

    Tomorrow I'll try your tip.

  13. Bosco Carvalho
    Member
    Posted 5 months ago #

    @DMBarber,

    Please help me out: why <center>XYZ CODE</center> works on WordPress?

    You can verify it on my sites footer: http://www.revistaecologica.com/ and http://www.qiempresarial.com/

  14. DMBarber
    Member
    Posted 5 months ago #

    Its not that <center> does not work, it is that it is being retired.

    It is still a valid tag in HTML4 but may or may not work HTML5. So rather than continuing to use code that is being deprecated, or retired, it is better to start switching to newer standards. That is all.

    I hope my explanation helps.

  15. Bosco Carvalho
    Member
    Posted 5 months ago #

    @DMBarber,

    I placed in Style.css

    .ads-footer-desktop {
    display: block;
    float: none;
    margin-bottom: 15px;
    width: 1380px;
    margin: 2% auto;
    }

    And the code between '</div><!--/.container-->' and '<footer id="footer">',

    but the ad goes to the left.

    How can I center it?

    With the responsive code, from Adsense, the result was similar. Just the ad's area was bigger.

    Thank you very much!

  16. Bosco Carvalho
    Member
    Posted 5 months ago #

    Dear friends,

    The solution is: <div style="text-align: center;"> before the Adsense code.

    That's all!

  17. unomaha1980
    Member
    Posted 5 months ago #

    I have been trying to put a banner 728*90 banner in header alongside the blog name (www.hamakdunyasi.com). The banner appears there but above the blog name. I am using Digest theme. I have "style.css" and "editor-style.css". I put the following code in both files but did not work.

    .ads-header-desktop {
    display: block;
    float: right;
    margin-right: 20px;
    margin-top: -115px;
    }

    Do you have any other suggestions? Thank you.

  18. Bosco Carvalho
    Member
    Posted 5 months ago #

    unomaha1980,

    Go to 'Appearance' to insert the code in 'Edit CSS'.

    If doesn't work propperly go to respective 'Digest Theme' forum: https://wordpress.org/support/theme/digest

  19. Bosco Carvalho
    Member
    Posted 5 months ago #

    unomaha1980,

    You must active JetPack to get the 'Edit CSS' active or use a Custom.css plugin.

  20. Bosco Carvalho
    Member
    Posted 4 months ago #

    Hi fellows,

    The ads code has to be placed in the Header.php just below:

    <body <?php body_class(); ?>> and remember to give the instructions to Custom.css as follows:

    .ads-header-desktop {
    display: block;
    float: right;
    margin-right: 20px;
    margin-top: 98px;
    }

  21. gaiusf
    Member
    Posted 4 months ago #

    @karenstl

    I look upon your site and your ads works well on desktop, I want to put the same banner ad size beside me header blog name. im confused what file in theme editor did you inserted that codes.

    hope you can assist me on this. Thanks!

  22. Bosco Carvalho
    Member
    Posted 4 months ago #

    @gaiusf,

    Just read the instructions above.

Reply

You must log in to post.

About this Theme

About this Topic

Tags