How to create an original top navbar
Original tutorial created by Irian and Mathias
If you want to share it, remember to paste the link!
1.
- Code:
<ul id="account"><li id="user"><font size="1">Welcome Guest</font></li><li id="account_link"><font size="1"><a href="/register.html">Register</a></font></li><li id="account_link"><font size="1"><a href="/login.html">Sign In</a></font></li><li id="admin"><font size="1"><a href="http://help.forumotion.com/">Forumotion</a></font></li><font size="1"> </font></ul>
a. Add this code after the BODY tag.
b. Change the links.
2.
- Code:
/* ACCOUNT: =account
------------------------------*/
#account {
background-color: #484848;
background-color: rgba(85, 85, 85, 0.5);
border: 1px solid #636363;
border-top: none;
-moz-border-radius-bottomright: 0px!important;
-moz-border-radius-bottomleft: 0px!important;
-webkit-border-bottom-right-radius: 0px!important;
-webkit-border-bottom-left-radius: 0px!important;
border-bottom-right-radius: 0px!important;
border-bottom-left-radius: 0px!important;
list-style: none;
position: fixed!important;
top: 0px;
right: 0px!important;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
width: 100%!important;
z-index: 999;
}
#account li {
float: left;
padding: 7px 11px 8px 11px;
}
#account li#user {
background: transparent url(../kissinsights.com/images/app/user_icon.png) 10px 8px no-repeat;
border-right: 1px solid #373737;
border-right: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 10px;
padding: 7px 11px 8px 26px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
margin-left: 18%!important;
}
#account li#admin,
#account li#account_link {
border-right: 1px solid #373737;
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid #5a5a5a;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
#account li#sign_out {
border-left: 1px solid #5a5a5a;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
#account li a {
color: #c8c8c8;
display: block;
font-size: 10px;
float: left;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
#account li a:hover { color: #fff; }
#account li#admin { background-color: rgba(255, 108, 0, 0.7); }
#account li#admin a { color: #fff; }
Add this code in the
CSS where you wantand Confirm
3.
Go to your homepage and press
F5 or
CTRL + F5.
You have completed the tutorial succesful!
If you have some problems with this tutorial, contact us in the support section.
Published by Irian
Post published on Tue Oct 25, 2011 3:44 pm
