Top Nav Bar Tutorial

Top Nav Bar Tutorial

The Woodsman

This navigation bar was originally made as a Speed dialer you might say for my test board but also works great for a website advertiser. Let me warn you I tried this by making a Hook and trashed my test board but as template and css edits it works perfect…

Go to Look & Feel in your ACP pick a skin you want to add the navbar to.
Go to “ Templates > Global Templates” globalTemplate
Find <div id='ipbwrapper'>
Add this below…

<div id="navbar">
<span class="inbar">
<ul>
     <li><a href="http://forum.gilbertsonenterprises.com/" target='_blank'><span>Forum Live!</span></a></li>
     <li><a href="http://woodsmansforest.com" target='_blank'><span>The Woodsman's Forest</span></a></li>
     <li><a href="http://woodsmansnotebook.com" target='_blank'><span>The Woodsman's Notebook</span></a></li>
     <li><a href="http://community.invisionpower.com" target='_blank'><span>Invision Power</span></a></li>
     <li><a href="http://www.invisionpower.com/#a_aid=xxxxxxxxxxxxx" target='_blank'><span>IPS Sales</span></a></li>
     <li><a href="http://www.invisionfocus.com/index" target='_blank'><span>Invision Focus</span></a></li>
<!-- <li><a href="" target='_blank'><span>Tab-2</span></a></li>
     <li><a href="" target='_blank'><span>Tab-3</span></a></li>
     <li><a href="" target='_blank'><span>Tab-4</span></a></li>
     <li><a href="" target='_blank'><span>Tab-5</span></a></li>
     <li><a href="" target='_blank'><span>Tab-6</span></a></li>
     <li><a href="" target='_blank'><span>Tab-7</span></a></li>
     <li><a href="" target='_blank'><span>Tab-8</span></a></li>
     <li><a href="" target='_blank'><span>Tab-9</span></a></li>
     <li><a href="" target='_blank'><span>Tab-10</span></a></li> -->
</ul>
</span>
</div><br />

/* TOP NAV BAR */

#navbar{
        width:auto;
        height:31px;
        background: transparent url({style_images_url}/top_nav.png) repeat-x;
        border-radius: 6px 6px 6px 6px;
       -moz-border-radius: 6px 6px 6px 6px;
       -webkit-border-top-left-radius: 6px;
       -webkit-border-top-right-radius: 6px;
       -webkit-border-bottom-left-radius: 6px;
       -webkit-border-bottom-right-radius: 6px;
        border: 2px solid #6C6141;
}

#navbar .inbar{
        display:block;
        height:31px;
}

#navbar ul, #navbar ul li{
        border:0px;
        margin:0px;
        padding:0px;
        list-style:none;
        height:31px;
        line-height:28px; 
}

 #navbar ul{
} 

#navbar ul li{
        float:left;
        display:block;
        /*line-height:28px;*/ 
}
 
#navbar ul li a{
        color:#6C6141;
        text-decoration:none;
        /*font-weight:bold;*/
        display:block; 
} 

#navbar ul li a span{
        padding: -5px 2px 0px 0px;
        height:31px;
        /*line-height:28px;*/
        display:block;
        margin-left:20px; 
}

#navbar .navhome a, #navbar .navhome a:hover{
        height:31px;
        /*line-height:28px;*/
} 

#navbar .navhome a span, #navbar .navhome a:hover span{
        color:#6C6141;
        height:31px;
       /*line-height:28px;*/         
} 

#navbar ul li a:hover{
        height:31px;
        text-decoration: none;
        /*line-height:28px;*/
} 

#navbar ul li a:hover span{
        text-decoration: none;
        height:31px;
        /*line-height:28px;*/
        border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
       -webkit-border-top-left-radius: 5px;
       -webkit-border-top-right-radius: 5px;
       -webkit-border-bottom-left-radius: 5px;
       -webkit-border-bottom-right-radius: 5px;
        border: 1px solid #6C6141; 
} 

/************************************************************************/

Komentarze:

Brak komentarzy