Latest topics
» Starred Forums
by Milouze14 Today at 01:43

» [GAME] Post a random picture
by  Yesterday at 22:31

» [GAME] What are you doing right now?
by Valoish Yesterday at 17:25

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

» [GAME] What are you listening to right now?
by Valoish Yesterday at 17:23

» Change the style of tooltips with tooltipster !
by  Yesterday at 12:17

» Flat Browser Buttons
by  Yesterday at 12:15

» #12 Pick a Theme
by SLGray Sat 14 Jan 2017, 20:07

» IconSkouliki
by skouliki Sat 14 Jan 2017, 03:07

» _userdata.usergroup
by STBW Sat 14 Jan 2017, 01:11

» Add more topic title colors
by Samantha Fri 13 Jan 2017, 19:43

» Browsers & Updates
by brandon_g Wed 11 Jan 2017, 10:37

» Happy Birthday Thread
by brandon_g Wed 11 Jan 2017, 10:35

» [GAME] Countdown from 200,000
by brandon_g Wed 11 Jan 2017, 10:29

» [GAME] Count to One Million!
by brandon_g Wed 11 Jan 2017, 10:27

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

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 : 4202
Points : 8665
Reputation : 2108
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