phpbb2 : Have a vertical navigation bar
Page 1 of 1
phpbb2 : Have a vertical navigation bar
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 ( ![]() Locate this part of the template, which contains the variable {GENERATED_NAV_BAR} :
and replace it with :
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 " ![]() Modifying the CSS stylesheet Go to Administration Panel ► Display ► Colors ► CSS stylesheet tab. Add the following code to your sheet :
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 :
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 :
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! ![]() |
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
-
Posts : 13244
Reputation : 2995
Language : English & 日本語
Location : Pennsylvania
محمد قدوتنا likes this post

» How to add Adsense to every new opened thread?
» Help in placing AdSense vertical banner into phpbb2 template
» Vertical navigation bar
» vertical navigation bar
» hover effect on navigation bar phpbb2
» Help in placing AdSense vertical banner into phpbb2 template
» Vertical navigation bar
» vertical navigation bar
» hover effect on navigation bar phpbb2
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum