04-29-2010, 03:21 PM
Here I will give an example on how to edit templates on your MyBB forum.
For the first example I will be explaining how to add links to your navigation bar.
Here on SF, the links that have been added are Home, Twitter, Contact & Invite.
For the second example, I will explain how to add advertising images below your menu bar. Like that of the MyBB advert here on SF.
Both are very easy to do.
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:
Part 1:
This is the link which your text will direct to. In this example, your forum index. (The home page).
Part 2:
This adds an image next to where your text will be.
Part 3:
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
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.
Now the next example is even easier..
Well I hope this helps a few people. It was aimed at helping beginners to get a better understanding & hopefully more confidence on template editing.
Thanks,
The Major
Note: My HTML knowledge isn't great so please If i made any mistakes, tell me and I will edit them.
For the first example I will be explaining how to add links to your navigation bar.
Here on SF, the links that have been added are Home, Twitter, Contact & Invite.
For the second example, I will explain how to add advertising images below your menu bar. Like that of the MyBB advert here on SF.
Both are very easy to do.
-----------------------------------
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">
Part 2:
Code:
<img src="http://www.example.com/images/Home.png"
Part 3:
Code:
alt="" title="Home"/>Home</a></li>
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="
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.
Now the next example is even easier..
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:
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.
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>
Simply add the code to the very end of the Header templates coding and you're done.
Well I hope this helps a few people. It was aimed at helping beginners to get a better understanding & hopefully more confidence on template editing.
Thanks,
The Major
Note: My HTML knowledge isn't great so please If i made any mistakes, tell me and I will edit them.