phpbb2 : Have a vertical navigation bar

by Ange Tuteur on Mon Apr 07 2014, 12:37

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