Latest topics
» Quick Reply Bug
by MiyakeDev Today at 00:34

» Adding text to reputation counter
by Ange Tuteur Yesterday at 17:19

» Forumactif Edge Web Page - Translations
by Ange Tuteur Yesterday at 17:15

» Forumactif Edge - Portuguese Translation (Brazilian)
by Ange Tuteur Yesterday at 16:24

» Forumactif Edge - Spanish Translation
by Ange Tuteur Yesterday at 16:24

» How do I add hover examine feature?
by dr.kran Yesterday at 06:18

» [GAME] Count to One Million!
by MiyakeDev Wed 22 Mar 2017, 20:59

» [THEME] Cosmic Sleek RED v1.1 - Phpbb3
by King Tue 21 Mar 2017, 12:39

» Forumactif Edge - Translations
by Ange Tuteur Mon 20 Mar 2017, 20:03

» [GAME] Post a random picture
by Ange Tuteur Mon 20 Mar 2017, 19:18

» Forumactif Edge - Greek Translation
by Ange Tuteur Mon 20 Mar 2017, 19:16

» IconSkouliki
by skouliki Mon 20 Mar 2017, 15:47

» Personal Rank Titles
by Harleen Mon 20 Mar 2017, 12:38

» Forum Actif Edge Skin Suggestion for Improvements
by Ange Tuteur Sun 19 Mar 2017, 21:36

» Colors Tab
by Ange Tuteur Sun 19 Mar 2017, 21:12

Recent Tutorials
Who is online?
In total there are 8 users online :: 1 Registered, 0 Hidden and 7 Guests :: 2 Bots

Harleen

[ 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 : 4382
Points : 9031
Reputation : 2186
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 : 844
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 : 4382
Points : 9031
Reputation : 2186
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