FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

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

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» 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

Recent Tutorials
Top posting users this month

Who is online?
In total there are 17 users online :: 0 Registered, 0 Hidden and 17 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

phpbb3: Invision Power Styled Navheader

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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:
phpbb3: Invision Power Styled Navheader Captur14

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