Latest topics
» make the legends color when u go in
by Wolfuryo Today at 04:45

» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by mr.blake214 Today at 01:13

» how to do this
by mr.blake214 Today at 00:04

» make the topic a color
by Wolfuryo Today at 00:04

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Yesterday at 23:55

» [GAME] What are you doing right now?
by SLGray Yesterday at 20:03

» change navbar name
by SLGray Yesterday at 20:01

» Forumotion & Edge
by SLGray Yesterday at 19:58

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by SLGray Yesterday at 15:52

» [GAME] Count to One Million!
by SLGray Yesterday at 15:51

» [GAME] Count to 30 - Ange Edition
by SLGray Yesterday at 15:51

» User - Made Creations
by SLGray Yesterday at 15:47

» FM Themes
by SLGray Yesterday at 15:45

» Emoticon Search
by SLGray Yesterday at 15:40

» Live Search
by SLGray Yesterday at 15:38

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

None

[ View the whole list ]


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

phpbb3: Vertical Navbar

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9609
Reputation : 2324
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 : 965
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 : 4641
Points : 9609
Reputation : 2324
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