Latest topics
» [GAME] Post a random picture
by Valoish Yesterday at 18:35

» [GAME] this or that
by Valoish Yesterday at 18:35

» [GAME] Never have I ever..
by Valoish Yesterday at 18:34

» [GAME] Last Letter Game
by Valoish Yesterday at 18:34

» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Valoish Yesterday at 18:33

» [GAME] World Snake
by Valoish Yesterday at 18:33

» [GAME] Animal Game
by Valoish Yesterday at 18:33

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Valoish Yesterday at 18:32

» [GAME] Count to One Million!
by Valoish Yesterday at 18:32

» [GAME] Countdown from 200,000
by Valoish Yesterday at 18:32

» [GAME] Q&A
by Valoish Yesterday at 18:32

» [GAME] Count to 30 - Ange Edition
by Valoish Yesterday at 18:26

» Widget : Member Statistics
by kian3210 Yesterday at 18:04

» Personal Emoticons
by Valoish Yesterday at 18:00

» Image Resizer
by Samantha NL Yesterday at 17:18

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

None

[ 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

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4074
Points : 8361
Reputation : 1999
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome 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