Introduction:
Have you ever wanted to add something like this to your website?
![[Image: mukJzQM.png]]()
Well now you can! The easy way. Images are provided.
Steps:
Go to your website>ACP>Templates and Style> Templates>Your Theme>Options--expand templates>
1.![[Image: 9MMEuS7.png]]()
2.![[Image: kUGyftr.png]]()
3.![[Image: eGWLqzM.png]]()
4.![[Image: JWpTNIb.png]]()
5.
![[Image: Vt0v5CN.png]]()
After you clicked on Index, find this code.
This will be at the very bottom.
Add this code above that code:
If you end up with a completely different result. Then tell me.
***Fixed thanks to SvePu
Have you ever wanted to add something like this to your website?
![[Image: mukJzQM.png]](http://i.imgur.com/mukJzQM.png)
Well now you can! The easy way. Images are provided.
Steps:
Go to your website>ACP>Templates and Style> Templates>Your Theme>Options--expand templates>
1.
![[Image: 9MMEuS7.png]](http://i.imgur.com/9MMEuS7.png)
2.
![[Image: kUGyftr.png]](http://i.imgur.com/kUGyftr.png)
3.
![[Image: eGWLqzM.png]](http://imgur.com/eGWLqzM.png)
4.
![[Image: JWpTNIb.png]](http://i.imgur.com/JWpTNIb.png)
5.
![[Image: Vt0v5CN.png]](http://imgur.com/Vt0v5CN.png)
After you clicked on Index, find this code.
Code:
<div class="forum" style="float: left; width: 76%;">{$forums}</div>
{$boardstats}
<br class="clear" />
{$footer}
</body>
</html>This will be at the very bottom.
Add this code above that code:
Code:
<div style="background: #fff6bf;border: 1px solid #ffd324;border-radius: 5px;padding: 8px 12px;margin: 10px auto 0;text-align:center;font-weight: bold;">First bar text goes here!</div>
<div style="background: #D6ECA6;border: 1px solid #8DC93E;border-radius: 5px;padding: 8px 12px;margin: 10px auto 0;text-align:center;font-weight: bold;">Second bar text goes here!</div>
<br /> If you end up with a completely different result. Then tell me.
***Fixed thanks to SvePu