[MyBB] Template Editing Example

First Example (Click to View)

Ok, so what we will be doing here is adding a "Home" link to our navigation.

I will be using www.example.com for this example.

- Firstly, log into your AdminCP and navigate to "Themes and Templates".
- On the menu bar to the left, select "Templates".
- Click "Options" next to the template that your current theme is using.
- A drop down menu will now appear, Select "Expand Templates"

Now you will see all your template sections for your current theme.
For this example we will be editing the "Header" section.

- Click "Expand" to the right of "Header".

A few sub sections will now appear. Select "Options" next to the first sub section named "Header". From the drop down menu select "Full Edit".

Now don't be scared by all of the coding. If you are not familiar with HTML, It really doesn't matter.

We will now add a Home link & place it before the current links.

Now I will tell you the code you will need to add, & I will describe what it is doing.

Full code:

Code:
<li><a href="http://www.example.com/index.php"><img src="http://www.example.com/images/Home.png" alt="" title="Home"/>Home</a></li>

Part 1:

Code:
<li><a href="http://www.example.com/index.php">

This is the link which your text will direct to. In this example, your forum index. (The home page).

Part 2:

Code:
<img src="http://www.example.com/images/Home.png"

This adds an image next to where your text will be.

Part 3:

Code:
alt="" title="Home"/>Home</a></li>

alt="" is showing that there is no alternate text displayed if the image does not load correctly. title="Home" will show the text "Home" when hovering over the image.
Inbetween /> and </a></li> is the text that will be shown in the navigation.

Ok but where on earth do you add this?

You will see clearly in the code, a section which has 4 current lines all starting with

Code:
<li><a href="

These are the current navigation links. Simple add your code above this section.

Make sure your code is inbetween the <ul></ul> brackets.
<ul></ul> basically just means whatever is contained within those brackets is an Unordered List

And thats it, you're done.

Second Example (Click to View)

Basically, just stay in the header template that you are currently in.
For this example I will be adding the support forums advertising banner.

Code for the banner:

Code:
<div style="text-align: center;"><a href="http://www.supportforums.net"><img src="http://www.supportforums.net/images/banners/728x90_SF.gif"  alt="Support Forums" border="0" /></a></div>

Note there are more Support Forums advertisements available Here, which include all the codes you need to add.

Simply add the code to the very end of the Header templates coding and you're done.