Info
Ever felt the need to add some of your own custom links to the navigation menu, but haven't had the room to?
This article will explain how to add a simple extended navigation bar to your "prosilver" style.
This also works with "prosilver_se".
Files to Edit
- overall_header.html
- common.css
Template Changes
Using FTP open overall_header.html
FIND:
- Code: Select all
<ul class="linklist rightside">
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
</ul>
ADD AFTER:
- Code: Select all
<ul class="linklist navlinks2">
<li><a href="yourlink">Test1</a> • </li>
<li><a href="yourlink">Test2</a> • </li>
<li><a href="yourlink">Test3</a></li>
</ul>
To add your links, all you would need to do is change:
- yourlink to your custom link
- test to your custom link name
Theme Changes
Again using FTP, open common.css
FIND:
- Code: Select all
ul.navlinks {
padding-bottom: 1px;
margin-bottom: 1px;
border-bottom: 1px solid #FFFFFF;
font-weight: bold;
}
ADD AFTER:
- Code: Select all
ul.navlinks2 {
/* font-weight: bold; */
margin-top: 30px;
padding-top: 2px;
padding-bottom: 1px;
margin-bottom: 1px;
border-top: 1px solid #FFFFFF;
text-align: center;
}
ul.navlinks2 li {
display: inline;
float: none;
margin-left: -4px;
}
If you want your links to be bold, just remove the /* */ tags from the last edit.
Finish
Remember to refresh the styles template and theme files.
Do this by going to:
- ACP:: Styles Tab >> Templates >> Prosilver Refresh
- ACP:: Styles Tab >> Themes >> Prosilver Refresh
Result
Enjoy your spacious links!
Revised: 11th June 2009 - HardStyle