Custom NavBar

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
AshWebmaster
Registered User
Posts: 27
Joined: Sun Jul 10, 2011 8:57 pm

Custom NavBar

Post by AshWebmaster »

I am looking for someone to help me out with a new custom navbar, like this for an example.

Example of what i mean > http://i.imgur.com/zVmQK.jpg
I have the codes below -

I know this code below goes in overall_header.html

Code: Select all

<div id="button">
       
    <div id="menubutton">
        <ul>
           <li class="chromestyle_button"><a href="Google.com"><span>Home</span></a></li>
    <li class="chromestyle_button"><a href="Google.com"><span>Home</span></a></li>
    <li class="chromestyle_button"><a href="Google.com"><span>Home</span></a></li>
    <li class="chromestyle_button"><a href="Google.com"><span>Home</span></a></li>
    <li class="chromestyle_button"><a href="Google.com"><span>Home</span></a></li>
        </ul></div>
        </div>

I dunno where to put this code below

Code: Select all

        #button {
          margin-left: 25px;
          height: 30px;
          width: 900px;
          background: url("{T_THEME_PATH}/images/menu_bg.gif") repeat-x;
        }
        #button ul {
          list-style: none;
        }
        #button span {
        }

        .chromestyle_button {
          height: 30px;
          float: left;
          padding-right:5px;
        }

        .chromestyle_button_active {
          height: 30px;
          float: left;
          padding-right:5px;
        }

        .chromestyle_button a {
        display: block;
          color: #105289;
          font-size: 12px;
          font-weight: bold;
          font-family: Arial, Helvetica, sans-serif;
          text-decoration: none;
          padding: 7px 5px 7px 5px;
           background: url("{T_THEME_PATH}/images/button.gif") top left repeat-x;
           border-left: 1px solid transparent;
           border-right: 1px solid transparent;
        }

        .chromestyle_button a:hover {
           background: url("{T_THEME_PATH}/images/button_active.gif") top left repeat-x;
           color: #105289;
           text-decoration: underline;
           padding: 7px 5px 7px 5px;
           border-left: 1px solid #95BDDD;
           border-right: 1px solid #95BDDD;
        }

        .chromestyle_button_active a {
           display: block;
          font-size: 12px;
          font-weight: bold;
          font-family: Arial, Helvetica, sans-serif;
          text-decoration: underline;
          padding: 7px 5px 7px 5px;
           background: url("{T_THEME_PATH}/images/button_active.gif") top left repeat-x;
           color: 105289;
           border-left: 1px solid #95BDDD;
           border-right: 1px solid #95BDDD;
        }
        .chromestyle_button_active a:hover {
           background: url("{T_THEME_PATH}/images/button_active.gif") top left repeat-x;
           color: #105289
           border-left: 1px solid #95BDDD;
           border-right: 1px solid #95BDDD;
        }
Thank you!
User avatar
Lumpy Burgertushie
Registered User
Posts: 68116
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Custom NavBar

Post by Lumpy Burgertushie »

add it to your common.css file.
you also need to put the relevant images in the theme/images/ folder
they are currently not there.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
Locked

Return to “[3.0.x] Styles Support & Discussion”