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

djblah, SLGray

[ View the whole list ]


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

[CSS NAV] Bleu Navbar

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 Tue 24 Sep 2013, 22:58

This is a blue navbar for phpbb3 and phpbb2 forums. It is strictly ran off of CSS which means you wont have to load any images in the navbar.

To apply this navbar to your forum navigate to..
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet then paste the code which corresponds to your forum version and submit.

<center><span style="background:#0184cf;border-radius:4px;color:#fff;font-weight:700;height:16px;line-height: 16px;margin-right:5px;padding: 0px 5px;">phpbb3</span></center>

Preview: http://i72.servimg.com/u/f72/18/45/41/65/captur11.png

To have the navbar buttons close together add this to the first block.
Code:
margin:0px -4px 0px -4px;
Code:
/*phpbb3 Bleu Boutons
par Ange Tuteur*/
ul.navlinks a.mainmenu{
box-shadow: 0px 2px 6px #59f inset;
text-shadow: 1px 1px 2px #000;
background-color:#3377bb;
border:1px solid #444;
font-weight:bold;
font-size: 11px;
transition:0.5s;
padding:5px;
color:#eee;
}
ul.navlinks a.mainmenu:hover{
background-color:#3388ff;
color:#ff8;
}
<center><span style="background:#0184cf;border-radius:4px;color:#fff;font-weight:700;height:16px;line-height: 16px;margin-right:5px;padding: 0px 5px;">phpbb2</span></center>

Preview: http://i72.servimg.com/u/f72/18/45/41/65/captur12.png

Please remember for phpbb2 you will need to use mini-icons in the navbar otherwise you will have a large space to the left. To have the navbar buttons close together add this to the first block.
Code:
margin:0px -6px 0px -6px;
Code:
/*phpbb2 Bleu Boutons
par Ange Tuteur*/
.bodyline > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) a.mainmenu{
box-shadow: 0px 2px 6px #59f inset;
text-shadow: 1px 1px 2px #000;
background-color:#3377bb;
border:1px solid #444;
position:relative;
font-weight:bold;
font-size: 11px;
transition:0.5s;
bottom:10px;
padding:5px;
color:#eee;
}
.bodyline > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) a.mainmenu:hover{
background-color:#3388ff;
color:#ff8;
}
If you have any questions regarding these please ask, thank you.
avatar
mist3r0us_b0y

Title :
Gender : Unspecified
Posts : 68
Points : 1552
Reputation : 16
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postmist3r0us_b0y on Wed 25 Sep 2013, 02:24

wow simple and nice menu for blue theme


--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
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 Wed 25 Sep 2013, 05:35

Thank you! Happy you like. ^^

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