phpbb2 : Have a vertical navigation bar

Go down

Tutorial phpbb2 : Have a vertical navigation bar

Post 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




avatar
Ange Tuteur
Forumaster

Male Posts : 13212
Reputation : 2936
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum