Adding Ad Banner to myBB header

mybb logomyBB – The best forum software of the year 2010 is just a perfect way to start you own forum. You might  already be using it amazing functions along with simplicity and easiness. If you’re using it, you might have felt the need of adding advertisements to your forum to earn bit of revenue from it besides discussing.

In this post, I’ll show you how to add banner in myBB’s header (to right side of the logo image). Probably, header is the best place to do so as its the most visible place. So, lets begin…

  1. Firstly, log onto your myBB Admin Panel.
  2. Now, move on to Templates and Styles tab.
  3. Choose Templates from the Left Pane.
  4. Now, choose the Template used by your Theme. I’m using the default theme for this guide. So, select it accordingly.
  5. From the Template Sets, choose Header Templates.
  6. Now select Header from the sub-menu.
  7. You will be taken to the editor. Now, find <div class=”logo”>and insert the following code exactly before the Logo Div is closed (See Screenshot):
    <div class=ads>
    INSERT AD CODE HERE
    </div> Adding Advertisement code 
  8. Now, replace INSERT AD CODE HERE with the advertisement code from your Ad Provider (Adsense or Any other). Recommended size is for a 468×60 banner. Larger sizes might break off the main template.
  9. Now, click Save and Return to Listing.
  10. We’ve inserted the banner. Now we just need to set alignment and location of the banner through css. So, select Themes from the left pane.
  11. From the available themes, select your Theme Name. (Again, I’m using the default theme. So, there might be changes in the available functions.)
  12. Now, under the Edit Stylesheets tab, select global.css from the list of stylesheets.
  13. Now select Edit Stylesheet: Advanced Mode tab.
  14. Move the end of the file and insert the following code there:
    .ads { float: right; 
    padding-top: 2px; 
    padding-right: 40px; }
    css code
  15. You can modify the Padding and margin to suit your theme. The above setting works fine for the default theme. Click Save changes and Close, when you’re done editing.
  16. The advertisement must show up correctly and properly aligned.

PS: In some cases (generally when you have some controls present just below the Ad banner) the banner might push those controls to the left to make space for itself. To solve that issue, just add <br/><br/> in the Template after the div with advertisement to break them to the next lines (See Screenshot).

incerting breaks

If you experience any kind of difficulty setting up your banner, let me know using the Comments section below.

, ,

6 Responses to Adding Ad Banner to myBB header

  1. Angela January 18, 2014 at 8:02 pm #

    I have got the job to put ads on mybb header. This tutorial helped me a lot! Thanks author!
    You can check my work at http://forums.jahirol.com

    • Narender January 18, 2014 at 8:24 pm #

      Nice to know that it helped. You have a nice forum over there, Angela.

  2. daniel June 19, 2015 at 5:47 am #

    perfect!! that save me the life!

  3. Prasanth Kallay May 29, 2016 at 3:58 pm #

    Thanks Narender for a nice post. Yes I added a banner successfully too. Can you please tell me the other places where banners or ads can be added on MyBB and how? Did you write any post on it? My forum is http://youcangetit.website

    • Narender Singh May 29, 2016 at 11:53 pm #

      Nice forum, Prasanth. That was the only place where I wanted ads in the forum I made. So, I do not have any idea about the other placements 🙂 Maybe you can try checking out some plugins.

  4. Prasanth Kallay May 30, 2016 at 4:48 am #

    Thanks for your appreciation. Congratulations for running this excellent blog.

Leave a Reply