Search
 
 

Display results as :
 

 


Rechercher Advanced Search
Latest topics
» New button
Wed Jan 06, 2016 9:14 am by Admin

» Scrolling Widgets
Sat Oct 24, 2015 3:13 am by Admin

» Questions on forumotion
Tue Aug 25, 2015 12:55 am by Admin

» Adding affiliates
Sat Aug 22, 2015 6:57 am by Admin

» hash tagging
Sat Aug 22, 2015 6:43 am by Admin

» Alert system
Sat Aug 22, 2015 6:41 am by Admin

» Facebook for kumari
Fri Aug 21, 2015 1:10 am by Admin

» Countdown for the site
Fri Aug 21, 2015 12:54 am by Admin

» background on top of background
Fri Aug 21, 2015 12:47 am by Admin

» transparent background
Mon Aug 17, 2015 12:34 pm by Admin

Click below for our World Map
 photo Kumari draft4_zpsyulb95s8.png
Switch Accounts


Control Panel

Code: Select Content

Your profile

Information

Preference

Signature

Avatar

Social

Friends and Foes

Memberlist

Groups

Private messages

Inbox

PM sent

Other

Topic is being watched


Share | 
 

 NAV BAR on side

View previous topic View next topic Go down 
AuthorMessage
Admin
Admin


Posts : 71
Join date : 2014-04-29

PostSubject: NAV BAR on side   Thu Jun 19, 2014 1:50 pm

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:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">  <tr>  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>  </tr>  </table>

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

url: http://help.forumotion.com/t132126-phpbb2-have-a-vertical-navigation-bar#886922
Back to top Go down
View user profile http://tester.omgforum.net
 
NAV BAR on side
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Finally an XP Fix for the Missing Text in Dark Side of the Moon
» The side you've picked in Fallout 4 [spoilers]
» [SPOILERS] A particular side-quest in FO4
» Ironside theme time
» FOR SALE: EX-TFD Guest Car, Slider S15 Prepared Skyline R34 GTR Drift Car

Permissions in this forum:You cannot reply to topics in this forum
 :: Your first category ::  Rose :: North :: Codes-
Jump to: