Add a menu bar/drop down menu to your phpBB3 – 1

Would you like to add a menu bar with drop-down lists such as the kind I have at my phpBB3 site? This is not something for the faint of heart, because depending on the phpBB3 style you use, you’ll have to tweak some of the .css. So make sure you know what you’re doing. If you’re unsure, or need any help with any of the steps below, contact us and we can help you out.

*Note: wherever you see “prosilver,” replace with the theme that you’re using. Also note that this tutorial is for prosilver-based themes only. I have not tried this on subsilver or subsilver-based themes.

Here is how I did it. We’ll start with the horizontal menu bar and later (in another tutorial) add multiple drop-down menus to it.

Files you’ll be working with today:

• 4 menu image files
• menu.css
• stylesheet.css
• overall_header.html

Go to Dynamic Drive and pick out a style of menu bar. You should right click and save four images – the right corner, the left corner and the divider images. If you’d like, you can open the images in your photo editor software and play with the colors and gradients. As you can see from the link above, I chose an inverted, rounded corner menu and changed the colors to a cheery shade of purple. After you’re finished making any changes to the images, upload them to phpBB3/styles/prosilver/theme/images/.

Next you’re going to want to create a new css stylesheet for your menu and upload it to phpBB3/styles/prosilver/theme/. Open your text editor and name a new file menu.css. In it, copy and paste this:

#cfnavbar{
margin: 0;
padding: 0;
}#cfnavbar ul{
background: url("{T_THEME_PATH}/images/bgpink.gif") center center repeat-x;
padding-left: 0;
margin-bottom: 8px;
float: left;
width: 100%; /*width of menu*/
height: 100%;
font: bold 100% Verdana;
}

* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}

#cfnavbar ul li{
display: inline;
}

#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: #000000;
font-weight: bold;
text-transform: uppercase;
padding: 7px 13px 12px 6px;
text-decoration: none;
background: url("{T_THEME_PATH}/images/dividerpink.gif") bottom right no-repeat;
}

#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url("{T_THEME_PATH}/images/leftcornerpink.gif") bottom left no-repeat;
}

#cfnavbar ul li a#rightcorner{
padding-right: 10px;
float: right;
display: block;
background: url("{T_THEME_PATH}/images/rightcornerpink.gif") bottom right no-repeat;
}

#cfnavbar ul li a:hover{
text-decoration: underline;
color: #235585;
}

Upload your newly created menu.css to phpBB3/styles/prosilver/theme/

Open phpBB3/styles/prosilver/theme/stylesheet.css.

Find:

@import url("memberlist_avatar.css");

Add after:

@import url("menu.css");

Save your changes and upload the modified file.

Here’s where it can get a little tricky. Every phpBB is different, with different MODs installed and/or different ways of organization. For example, I have several custom searches, a portal page, an arcade, and even tickers. You can have as many different links as will fit in your menu, but for the purposes of this tutorial, I’ll only include the most basic. That being said, Open phpBB3/styles/prosilver/template/overall_header.html.

Find:

<div class="headerbar">
             <div class="inner"><span class="corners-top"><span></span></span>

    <div style="height: 154px; width: 870px;" id="site-description">
                <a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="images/spacer.gif" width="870" height="136" alt="" /></a>
                <!--<h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>-->
                <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
             </div>

             <span class="corners-bottom"><span></span></span></div>
          </div>

After add:

<div id="cfnavbar">
<ul>
<li><span><a href="{U_INDEX}" accesskey="h" id="leftcorner">{L_INDEX}</a></span></li>
<li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><l><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l" <!-- IF S_USER_LOGGED_IN -->id="rightcorner"<!-- ENDIF -->>{L_LOGIN_LOGOUT}</a></li>

    <!-- IF not S_USER_LOGGED_IN --><li><a href="{U_REGISTER}" id="rightcorner">{L_REGISTER}</a></li><!-- ENDIF -->
</ul>
</div>

And that should be it! Good luck and please let me know if this tutorial was helpful to you.

Tagged as: css, drop-down, menubar, phpBB