IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Mon 10 Sep 2018, 10:48

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 10 users online :: 0 Registered, 0 Hidden and 10 Guests :: 2 Bots

None

[ 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
Gender : Male
Age : 22
Posts : 4735
Points : 9949
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Tech Review
New Member
Gender : Unspecified
Posts : 3
Points : 1394
Reputation : 0
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
View user profile

PostTech Review on Tue 09 Dec 2014, 06:06


how do fix
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4735
Points : 9949
Reputation : 2369
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

Sponsored content

PostSponsored content

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