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 () the overall_header template. 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 "" in the template list. 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 |
محمد قدوتنا likes this post
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum