Navigation Menu: WSN Support Forums

Navigation Menu
adding css for a navigation menu

Comments on Navigation Menu

•Webmist
Member

Usergroup: Customer
Joined: Oct 13, 2007

Total Topics: 4
Total Comments: 12

Posted Oct 16, 2007 - 6:58 PM:

Just got WSN Links and love it. As I go through the manual and learn the codes I can help with template mods. Didn't see this anywhere and it's a simple one that I've used on my site and thought I'd share. Simply modify the image paths, sizes, and colors to your personal choice.

Add the following to your stylesheet (styles/default.css by default):

#navbar_menubar {
margin-left: 0;
position: relative;
width: 100%;
display: block;
height: 25px;
font-size: 14px;
font-weight: bold;
font-family: Arial;
} 

#navbar_menu {
position: relative;
display: block;
height: 25px;
font-size: 10pt;
font-family: Arial;
font-weight: bold;
} 

#navbar_menu ul {
margin: 0;
padding: 0;
list-style-type : none;
width: auto;
} 

#navbar_menu ul li {
display: block;
float: left;
margin: 0;
border-right: 2px outset #BDBDBD;
border-left : 1px outset #6699FF;
} 

#navbar_menu ul li a:link, #navbar_menu ul li a:visited {
display: block;
float: left;
color: #FFF;
text-decoration: none;
padding: 0 20px 0 20px;
height: 25px;
background-image: url('../images_default/navbar_off.gif');
background-position: top left;
} 

#navbar_menu ul li a:hover {
background-image: url('../images_default/navbar_on.gif');
background-position: top left;
} 

#navbar_menu ul li a.current, #navbar_menu ul li a.current:hover {
background-image: url('../images_default/navbar_current.gif');
background-position: top left;
}

ADD the following to your WRAPPER under Global templates:

<div id="navbar_menubar">
<div id="navbar_menu">
<ul>
<IF {TID} contains main.tpl><li><a class="current" href="{DIRURL}">Home</a></li>
<OTHERWISE>
<li><a href="{DIRURL}/"> </IF>
<IF {SWITCH_MEMBERS}>
<IF {TID} contains register.tpl><li><a class="current" href="{DIRURL}/register.php">Join</a></li>
<OTHERWISE>
<li><a href="{DIRURL}/register.php">Join</a></li>
</IF>
</IF>
<IF {SWITCH_SITEMAP}>
<IF {TID} contains sitemap.tpl><li><a class="current" href="{DIRURL}/sitemap.php">Sitemap</a></li>
<OTHERWISE>
<li><a href="{DIRURL}/sitemap.php">Sitemap</a></li>
</IF>
</IF>
<IF {SWITCH_CONTACT}>
<IF {TID} contains contactform.tpl><li><a class="current" href="{DIRURL}/contactform.php">ContactUS</a></li>
<OTHERWISE>
<li><a href="{DIRURL}/contactform.php">ContactUS</a></li>
</IF>
</IF>
</ul>
</div>
</div>

This will simulate a menu that will show highlighted based on what template your are using.

Attached Files:

•Paul
developer

Usergroup: Administrator
Joined: Dec 20, 2001
Location: Diamond Springs, California

Total Topics: 61
Total Comments: 7868

•Paul

#2 - Quote - Permalink

Posted Oct 17, 2007 - 9:32 AM:

Looks good, but instead of http://wsnlinksdirectory, use {DIRURL}. Changed it for you. Also made it obey the switches. Also changed it to have the images be in templates/images_default with the rest.

•Webmist
Member

Usergroup: Customer
Joined: Oct 13, 2007

Total Topics: 4
Total Comments: 12

•Webmist

#3 - Quote - Permalink

Posted Oct 18, 2007 - 7:27 PM:

Thanks Paul. I've been doing template vb designs for the last couple of years. Having to wrap my mind our and seek out all the conditionals for wsnlink now. But I will prevail. nod

This thread is closed, so you cannot post a reply.