Latest topics
» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Van-Helsing Today at 16:03

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Today at 16:03

» [GAME] Count to One Million!
by Van-Helsing Today at 16:02

» [GAME] Count to 30 - Ange Edition
by Van-Helsing Today at 16:01

» Is there any new update for ForumActif Edge?
by Van-Helsing Today at 16:01

» Add a login popup for the toolbar
by Ape Yesterday at 17:26

» [GAME] Post a random picture
by SLGray Fri 22 Sep 2017, 19:23

» Topic'It
by Ange Tuteur Fri 22 Sep 2017, 10:06

» Topic'It
by SLGray Thu 21 Sep 2017, 15:52

» FM Themes
by SLGray Thu 21 Sep 2017, 15:51

» User - Made Creations
by SLGray Thu 21 Sep 2017, 15:50

» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

Recent Tutorials
Who is online?
In total there are 14 users online :: 2 Registered, 0 Hidden and 12 Guests :: 1 Bot

djblah, Eslam Love

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

phpbb3: Vertical Navbar

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9737
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 15 Oct 2013, 02:50

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


Notice
Tutorial written by Ange Tuteur.
Reproduction not permitted without consent from the author.


Last edited by Ange Tuteur on Tue 15 Mar 2016, 06:26; edited 1 time in total
avatar
Tech Review
New Member
Title :
Gender : Unspecified
Posts : 3
Points : 1028
Reputation : 0
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostTech Review on Tue 09 Dec 2014, 06:06


how do fix
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9737
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 09 Dec 2014, 06:54

Administration Panel > General > Forum > Configuration > Forum width

Choose a lower width value.

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