phpbb2 : Have a vertical navigation bar

by Ange Tuteur on April 7th 2014, 11:37 am

Have a vertical navigation bar for phpbb2

The following tutorial will help you get a vertical navigation bar on your Forumotion forum.

Demonstration : Vertical navigation bar

Before making any changes, make sure that your forum meets the following conditions :
- You must be the founder of the forum and have access to its templates.
- Your forum version must be phpBB2.

Modifying the overall_header template

Go to Administration Panel ► Display ► Templates ► General and edit ( Edit

) the overall_header template.

Locate this part of the template, which contains the variable {GENERATED_NAV_BAR} :

Code:: <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>

and replace it with :

Code:: <div class="vertical_nav">{GENERATED_NAV_BAR}</div>

Explanation :

By placing the variable that generates the navigation bar in a div, and giving it the class vertical_nav, will allow us to modify its style with CSS.

Once the modifications are complete, save and publish the template by clicking the green plus " Add

" in the template list.

Modifying the CSS stylesheet

Go to Administration Panel ► Display ► Colors ► CSS stylesheet tab.

Add the following code to your sheet :

Code:: div.vertical_nav { position:absolute; top:50px; left:5%; }

Explanation :
position:absolute; allows us to place the navigation bar as a floating element
top:50px; allows us to position our block 50 pixels from the top of the page
left:5%; allows us to position our block 5% from the left of the page

Note: If you want the block to stay where it is while scrolling the page, you must replace position:absolute; with position:fixed;

To finish, add the following code to your sheet :

Code:: div.vertical_nav a.mainmenu { display:list-item; list-style:none; }

Explanation :
display:list-item; allows us to see the links in the navigation bar as a list from top to bottom
list-style:none; allows us to remove the style originally assigned to the lists (the bullets : •)

If you want to add a border to your navigation as in the demonstration above, just add on to the style of the element div.vertical_nav :

Code:: div.vertical_nav { background:#FFFFFF; border:1px solid #D0D0D0; }

Explanation :
background:#FFFFFF; allows us to color the background of the block white
border:1px solid #D0D0D0; allows us to add a solid gray border of 1px

Do not forget to save your changes, and most importantly, be creative! Wink

This tutorial was written by Matriochka of the French support, it has been translated to English by Sir. Mayo, and corrected by Ange Tuteur.

To submit a tutorial, please read the following topic : How to submit a tutorial