Latest topics
» Web Page Speed & Optimization for FAE
by dannig Today at 21:38

» Bootstrap compatibility
by dannig Yesterday at 18:26

» Need Help installing Forumactif Edge Theme
by dannig Yesterday at 12:21

» Forumactif Edge - FRENCH Translation
by Milouze14 Yesterday at 12:05

» Awards
by Ange Tuteur Yesterday at 11:28

» [GAME] Count to One Million!
by Ange Tuteur Yesterday at 11:20

» Forumotion Edge - italian translation
by Ange Tuteur Yesterday at 11:10

» Forumactif Edge Web Page - Italian Translation
by Ange Tuteur Yesterday at 11:07

» [GAME] Post a random picture
by Ange Tuteur Yesterday at 11:02

» Hello!
by brandon_g Yesterday at 09:15

» Profile fields CSS/bbcode stopped working
by dannig Tue 25 Apr 2017, 11:21

» Issues with adjusting centered profile fields
by Ange Tuteur Mon 24 Apr 2017, 11:54

» [GAME] Q&A
by Dr Jay Sun 23 Apr 2017, 14:53

» [GAME] Last Letter Game
by Dr Jay Sun 23 Apr 2017, 14:26

» [GAME] Never have I ever..
by Dr Jay Sun 23 Apr 2017, 14:25

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

dannig

[ View the whole list ]


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

phpbb3: Invision Power Styled Navheader

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4480
Points : 9219
Reputation : 2241
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 Thu 10 Oct 2013, 07:34

This tutorial will help you get an invision power styled navheader for your phpbb3 forums. If you're good at CSS you will most likely enjoy modifying this code.

Installing CSS
This navheader is put together entirely using CSS which means you can modify anything you want on it through the code I'll supply later on in this post. To get started navigate to..
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet

Paste this code into your stylesheet and submit:
Code:
/*Header*/
.headerbar {
background-color:#245A75;
position:absolute;
height:140px;
right:0px;
left:0px;
top:0px;
}
#logo img{
max-height:70px !important;
max-width:264px !important;
}
#logo{
float:left;
position:relative;
top:30px;
}
#site-title, #logo-desc p{
text-align:left;
margin-right:200px;
margin-left:270px;/*Remove this if you're not using LOGO IMG(Banner)*/
position:relative;
top:30px;
}
#site-title, #site-title h1, #logo-desc p {
text-shadow:1px 1px 2px #000;
color:#fff;
}
p.nomargin/*Header Searchbar*/{
position:absolute;
right:20px;
top:-40px;
}
/*Navbar Links*/
a.mainmenu{
text-shadow: 1px 1px 2px #000;
border-top:1px solid:#194459;
-webkit-transition:0.400s;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
font-weight:bold;
font-size: 11px;
padding:5px;
color:#fff;
}
a.mainmenu:hover{
box-shadow:0px 5px 6px #002439 inset;
border-top:1px solid:#002439;
background-color:#174157;
}
ul.navlinks {
position:relative;
text-align:left;
border:none;
}
/*Navbar Background/Position*/
.navbar {
background-color:#194459;
position:absolute;
height:37px;
clear:both;
right:0px;
top:103px;
left:0px;
}
/*Footer
This will help keep footer in proper position*/
#page-footer .navbar{
background-color:transparent;
position:inherit;
display:inline;
border:none;
}
/*Forum Wrap
This helps give the navheader space*/
#wrap{margin-top:140px;}
/*Corner removal
If you have already removed the corner images from your pics management, remove this snippet*/
span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span {
display:none;
}

If done correctly and you have no codes which can conflict with this, the result should be similar to this:

Important parts to modify<
I will go over the entire code now so you may know how you can modify this.

The header is most important, that being it is the base for the entire navheader combo. You should mainly only focus on modifying the colors for this, unless of course you're advanced with CSS. Additionally you can modify the height of this if you do not use the toolbar or you run into layout errors.
Code:
.headerbar {
background-color:#245A75;
position:absolute;
height:140px;
right:0px;
left:0px;
top:0px;
}

The logo is another important piece. It is very important to restrict the height and width of logo images otherwise they will simply break the layout of this IP styled navhead. You can adjust the top position if your logo is being cut off, or remove floating if you want to center the image.
Code:
#logo img{
max-height:70px !important;
max-width:264px !important;
}
#logo{
float:left;
position:relative;
top:30px;
}

The site title and logo. The margin left prevents the title/desc from floating over your logo image making it unclickable. If you do not use a logo image you can remove margin-left. The lower piece of this code deals with styling your title/desc with text shadow and color, you can modify this if you wish.
Code:
#site-title, #logo-desc p{
text-align:left;
margin-right:200px;
margin-left:270px;/*Remove this if you're not using LOGO IMG(Banner)*/
position:relative;
top:30px;
}
#site-title, #site-title h1, #logo-desc p {
text-shadow:1px 1px 2px #000;
color:#fff;
}

The search bar. This is the searchbar for our header, which gives our members quick and easy search access. If it is not positioned correctly simply modify right and top until it is where you want it.
Code:
p.nomargin/*Header Searchbar*/{
position:absolute;
right:20px;
top:-40px;
}

The navbar links. This part deals with styling our navlinks, the first piece is the plain text which is displayed regulary. The second part is the styles applied when we hover our mouse over the links, you can modify the color, shadow, and radius to your liking. The third part deals with the alignment of the text, you can set it to: left, center, or right if you wish.
Code:
a.mainmenu{
text-shadow: 1px 1px 2px #000;
border-top:1px solid:#194459;
-webkit-transition:0.400s;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
font-weight:bold;
font-size: 11px;
padding:5px;
color:#fff;
}
a.mainmenu:hover{
box-shadow:0px 5px 6px #002439 inset;
border-top:1px solid:#002439;
background-color:#174157;
}
ul.navlinks {
position:relative;
text-align:left;
border:none;
}

This is the navbar base. This helps set the position and gives our navheader its smooth thick straight line across. You should focus on modifying the background color to your liking. Additionally if the elements are not positioned correctly you should modify the height, or top position of the navbar.
Code:
.navbar {
background-color:#194459;
position:absolute;
height:37px;
clear:both;
right:0px;
top:103px;
left:0px;
}

The footer. You are to not modify this peice, as it helps to keep the footer in correct positioning.
Code:
#page-footer .navbar{
background-color:transparent;
position:inherit;
display:inline;
border:none;
}

The wrap/body. This helps give our forum space for the top so our new navheader does not display directly on top of it. If it is displaying directly on top, or there is a gap, modify the pixels of margin top until it is positioned correctly.
Code:
#wrap{margin-top:140px;}

Lastly is corner image removal. This piece removes the images which help give your forum those round corners. You can remove it if you want however, it will make the display of the navheader look awkward. You can additionally remove the corners manually through pics management.
Code:
span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span {
display:none;
}

Well that is everything, if you do have anymore questions you can always contact me. Thanks for reading and good luck with your forums!


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

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