The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

phpbb2 : Have a vertical navigation bar

View previous topic View next topic Go down

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


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


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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