FM Themes
Welcome to FM Themes
where you can share your punBB, phpBB 2, Invision, & phpBB 3 themes for Forumotion forums.

You are viewing the forum as a guest, so you will not be able to use the full forum. To use all the features of the forum, you need to log in or create a FREE account by registering.
Latest topics
» This or That
by brandon_g Yesterday at 10:30 am

» Count to 2000
by brandon_g Yesterday at 10:25 am

» Easter Themes
by SLGray Thu Feb 23, 2017 12:33 pm

» Easter Themes
by SLGray Thu Feb 23, 2017 12:32 pm

» Easter Themes
by SLGray Thu Feb 23, 2017 12:31 pm

phpbb3: Vertical Navbar

View previous topic View next topic Go down

Ange Tuteur
Themer
Reputation : 205
Points : 9163
Posts : 303
View user profile http://fmdesign.forumotion.com/

PostAnge Tuteur on Wed Oct 16, 2013 5:00 am

Vertical Navbar phpbb3

This tutorial will help you achieve a vertical navbar for your phpbb3 forums. It is formed completely from CSS so you can edit it freely.

Installing

Before we start we should reserve some space for the navbar so navigate to..
Administration Panel > General > Forum > Configuration

Find 'Forum width (number or %)' and set it to at least 80%, you can have it lower if you want. This will help reserve space for the navbar so it is not overlaying the forum. When you have finished that we can now begin installing the navbar, navigate to..

Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet

Paste the code below into your stylesheet and submit.
Code:
/*Navbar*/
.navbar a.mainmenu{
position:relative;
top:15px;
margin:-10px 0px -10px 0px;
text-shadow:1px 1px 2px #000;
border-radius:5px;
font-weight:bold;
font-size:11px;
display:block;
color:#fff;
}
.navbar a.mainmenu:hover{
box-shadow:0px 5px 6px rgba(0,0,0, 0.3) inset;
background-color:rgba(0,0,0, 0.1);
color:#ff8;
}
ul.navlinks {
text-align:left;
position:relative;
border:none;
}
/*Navbar Base*/
.navbar {
box-shadow:5px 5px 10px rgba(0,0,0, 0.2) inset, -0.1px -5px 10px rgba(0,0,0, 0.2) inset;
-webkit-border-radius:10px 0px 0px 10px;
-moz-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
background-color:rgba(0,0,0, 0.3);
border-radius:10px 0px 0px 10px;
position:fixed;
height:auto;
width:98px;
right:0px;
top:35px;
}
/*Nav Searcher*/
p.nomargin > input#keywords.inputbox.search{
position:relative;
width:75px !important;
right:-5px;
margin-bottom:5px;
}
p.nomargin > input.button2{
display:none;
}
div#search_menu.overview.row3 {
left: -370px !important;
top: 140px !important;
}
/*Footer*/
a.icon-home{
display:none;
}
#page-footer .navbar/*DO NOT MODIFY*/{
background-color:transparent;
position:inherit !important;
box-shadow:none !important;
display:inline !important;
border:none;
}
span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span {display:none;}/*Corner Removal*/
#wrap {float:left;}/*Space Reserve*/
If done correctly and you have no codes which can conflict with this navbar, the result should be like the image below.

Important parts to modify

I will now go over the entire code for those who wish to modify it.

The navlinks. The first part allows you to modify the positioning and color of the links. If you need to edit the positioning please make use of top and margin. The second part modifies the styles applied on hover, you can edit the color, background, and box shadow. The third part modifies the text alignment you can change this with the values: right, left, and center.
Code:
/*Navbar*/
.navbar a.mainmenu{
position:relative;
top:15px;
margin:-10px 0px -10px 0px;
text-shadow:1px 1px 2px #000;
border-radius:5px;
font-weight:bold;
font-size:11px;
display:block;
color:#fff;
}
.navbar a.mainmenu:hover{
box-shadow:0px 5px 6px rgba(0,0,0, 0.3) inset;
background-color:rgba(0,0,0, 0.1);
color:#ff8;
}
ul.navlinks {
text-align:left;
position:relative;
border:none;
}
The base of the navbar. This modifies the block which the navlinks are bound to. You can change the color of it if you wish however, remember that we are using RGBA so the colors are transparent. You can also modify the positioning of this navbar by modifying top and right. If you need to adjust the width of it look to the width property to modify the pixels.
Code:
/*Navbar Base*/
.navbar {
box-shadow:5px 5px 10px rgba(0,0,0, 0.2) inset, -0.1px -5px 10px rgba(0,0,0, 0.2) inset;
-webkit-border-radius:10px 0px 0px 10px;
-moz-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
background-color:rgba(0,0,0, 0.3);
border-radius:10px 0px 0px 10px;
position:fixed;
height:auto;
width:98px;
right:0px;
top:35px;
}
The navbar searchers. The first part deals with the white search bar at the bottom, you can edit the positioning and width if it isn't displaying properly for your forum. The second part removes the search button since you can initialize the search by hitting the enter key. The last part is to help reposition the searcher that displays when you hit the search navlink. If that is not positioned correctly edit left and top until it is.
Code:
/*Nav Searcher*/
p.nomargin > input#keywords.inputbox.search{
position:relative;
width:75px !important;
right:-5px;
margin-bottom:5px;
}
p.nomargin > input.button2{
display:none;
}
div#search_menu.overview.row3 {
left: -370px !important;
top: 140px !important;
}
The footer. Do not modify these parts, this is to help fix the positioning and remove the home button which caused a few glitches.
Code:
/*Footer*/
a.icon-home{
display:none;
}
#page-footer .navbar/*DO NOT MODIFY*/{
background-color:transparent;
position:inherit !important;
box-shadow:none !important;
display:inline !important;
border:none;
}
The corner images and wrap. The first part removes all corner images so they do not interfere with the style of the navbar. If you have already removed those images via pics management you can remove this part of the CSS. Lastly is the wrap, this helps the wrap float to the left of the forum so the navbar has enough room to display without overlaying it.
Code:
span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span {display:none;}/*Corner Removal*/
#wrap {float:left;}/*Space Reserve*/
That is all the parts! If you need help converting hex color to RGB, I would recommend using this. If you still have questions you can always contact me, thanks for reading and have fun! Smile

Useful Reading

For more information on some of the properties used in this tutorial consult the following links.

[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.]

Tutorial written by [You must be registered and logged in to see this link.]
No reproduction possible without our consent.
SLGray
Administrator
Reputation : 297
Points : 1666
Posts : 3790
View user profile http://fmthemes.forumotion.com

PostSLGray on Wed Oct 16, 2013 3:34 pm

Tutorial Approved

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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