<
a. Add this code after the BODY tag.
b. Change the links.
Add this code in the CSS where you want
and Confirm
Go to your homepage and press F5 or CTRL + F5.
Original top navbar
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.
- Codice:
<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.
- Codice:
/* 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 want
and 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.
If you have some problems with this tutorial, contact us in the support section.