How to insert ad code below the header on mybb forums without plugin

MyBB
No Comments

Below the Header

Below the header you can display ads in two places
mybb ad below header

  1. Below the header image and above the top navigation.
  2. Below the top navigation.

Login into your admin dashboard and click on Templates & Style.

mybb tutorial

Then click on Templates in the left hand corner.

display ads my bb

For the template you are using click on options and then Expand Templates.

You will see a long list of Template Set. Search for Header Templates.
Still cant find it then on the keyboard press CTRL and F together and find Header Templates.

mybb display ads

For Header Templates click on Expand then on Options then Full edit next to the header.

The code inside the header may vary across different templates but certain things remain more or less the same.

Now press CTRL and F on your keyboard and type the word logo and click on find.
You will see few instances of the word logo.

mybb ad below header image

Logo here means the header image so you need to insert the ad code after the logo ends and that is after </a> tag.

<div class="ads">
AD CODE HERE
</div>

If you do this then your ad will be displayed below the header image and above the top navigation.

If you want to display the ad below the top navigation:

mybb ad code

In the same header template file press CTRL and F together on your keyboard and type
<div id=”content”> and click on find.
Place the following code above the <div id=”content”>

<div class="ads">
AD CODE HERE
</div>

If you cant find <div id=”content”> then you have to first examine the structure of your theme’s top navigation. For example in the default mybb theme in the top navigation bar there are options like Calander, Help etc.

mybb default

Focus on the last option which in this case is Help.
In the same header template file press CTRL and F together on your keyboard and type the word help or whatever is the last option in the top navigation for your template.
Insert the ad code where the top navigation ends.

<div class="ads">
AD CODE HERE
</div>

It usually ends with </li> </ul> tags accompanied by some </div> tags.

Alignment
The ads will be aligned on the left hand side of the page by default but what if you want to move it to the center of the page.
Enclose the code within <center> </center> tags

<center> <div class="ads">
AD CODE HERE
</div> </center>

You can also center it using CSS margin-left property but I prefer center because center tag centers it for all screen sizes. If you use margin property of CSS the alignment may look different across different screen sizes especially on mobile devices so you would then have to write separate media queries in the CSS file.

Using CSS
Click on Templates & Style and then Edit the theme which you want to make changes to.

mybb edit theme

Next to global.css click on Options and Edit Style.

After that click on Edit Stylesheet: Advanced Mode
Scroll down to the bottom of the page.

mybb theme edit

.ads {
CSS CODE GOES HERE
}

You can use custom css code to move the ad upwards, downwards, left or right by using margin property, you can also add padding or other css styling.

Next Post
How to secure mybb forums

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Menu