phpbb3: Invision Power Styled Navheader

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.

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:

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.