phpbb2 : Have a vertical navigation bar Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    phpbb2 : Have a vertical navigation bar

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    Tutorial phpbb2 : Have a vertical navigation bar

    Post by Ange Tuteur 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

    محمد قدوتنا likes this post

    • Back to top