Home
KBZ TEAM
Latest images
Search
Register
Log in
balu♥krishnaKßZ ►☻◄ ƒøяυλ⁄(-αđмιиιѕтяαтσя
BALU KRISHNA
AGE : 36
POSTS : 330
REPUTATION : 48
KBZ TEAM POINTS : 924
JOIN DATE : 2013-12-04
BIRTHDAY : 1988-05-15
LOCATION : India , kerala
Tutorial: Stylized FA Toolbar
Fri Nov 27, 2015 8:36 am
 | Tutorial: Stylized FA Toolbar |
Improved design of Forumotion toolbar similar to PunBB Community.
--> Tutorials, tips and tricks <--
New looking Toolbar
New looking Toolbar
1º - CSS
- Code:
#soloinvitadostopde32 {
position: fixed;
top: 1px;
z-index: 99999999!important;
margin-left: -150px;
}
#soloinvitadostopde32 a {
cursor: pointer;
display: inline-block;
height: 16px;
line-height: 26px;
margin: 0 6px;
font-size: 20pt;
font-family: 'Monotype Corsiva';
font-weight: bold;
color: #fff;
}
#soloinvitadostopde32 a#fa_notifications1 {
background-repeat: no-repeat;
background-image: url('http://cdn1.iconfinder.com/data/icons/crystalproject/32x32/filesystems/Globe.png');
background-size: 30px;
width: 30px;
height: 27px;}
#str {
display: block;
overflow: hidden;
padding: 20px 10px;
}#str label {
display: block;
}
#str input {
background-color: #424242;
border: 1px solid #000;
color: #5C5E61;
font-family: Arial, sans-serif;
font-size: 14px;
margin-bottom: 5px;
width: 250px;
}
input[type="password"], input[type="text"], textarea {
-webkit-border-radius: 3px;
background-color: #fff;
border: 1px solid #CCC;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
color: #515151;
cursor: text;
display: inline-block;
line-height: 18px;
padding: 4px;
}
#login_remember_p {
font-family: helvetica;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
#str .login_remember_p {
display: inline-block;
position: relative;
width: auto!important;
}
#buttonlogin input.mainoption {
background: -moz-linear-gradient(top,#97C92F,#71A00E);
border: 4px solid #000;
box-shadow: none;
color: #000;
display: block;
margin-top: 10px;
padding: 10px 0;
width: 100%;
}
#fa_search {
position: fixed;
z-index: 99999!important;
top: 1px;
margin-left: 150px!important;
}
#fa_icon {
display: none !important;
}
#fa_service {
display: none !important;
}
#soloinvitadostopde {
position: fixed;
right: 20px;
top: 1px;
z-index: 99999999!important;
}
#soloinvitadostopde a {
background: #EAEAEA;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #000!important;
cursor: pointer;
display: inline-block;
height: 16px;
line-height: 16px;
margin: 0 3px;
padding: 7px 10px;
}
#soloinvitadostopde a#fa_notifications {
background: #badcf3;
}
.sutlogin {
background: rgb(223, 223, 223);
border: 1px solid #242424;
border-radius: 0 0 3px 3px;
color: #606364;
font-family: arial;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: bold;
margin-top: 7px;
padding: 0;
position: absolute;
right: 110px;
top: 30px;
width: 291px;
z-index: 999;
}
body #fa_toolbar #live_notif .fa_notification {
background: -moz-linear-gradient(top,rgba(0, 163, 255, 0.74) ,rgba(0, 153, 255, 0.77))!important;}
body #fa_toolbar #live_notif {
position: fixed!important;
bottom: 10px!important;
left: 10px!important;
}
body #fa_toolbar #live_notif .fa_notification {
background: -webkit-linear-gradient(top, rgba(0, 163, 255, 0.74), rgba(0, 153, 255, 0.77))!important;
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.31);
opacity: 1!important;
border: 1px solid #017FBB;
}body #fa_toolbar #fa_menu:hover :visited{
background: transparent!important;
}
html body #fa_right a#fa_notifications.rightHeaderLink {
background: rgb(186, 220, 243);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #000!important;
display: inline-block!important;
height: 16px;
line-height: 16px;
padding: 7px 5px;
}
body #fa_toolbar_hidden {
display: none!important;
}
body #fa_hide {
display: none!important;
}
body #fa_menu,body #fa_notifications {
border-left: 1px solid #333;
}
body #fa_toolbar {
position: fixed;
border-top: 1px solid #333;
box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
background-color: #222;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
padding: 0px;
border-bottom: 7px solid #EAEAEA;
background: #35353e;
}
body #fa_magnifier {
display: none!important;
}
body #fa_search #fa_textarea {
color: #ddd;
outline: none;
background-image: url("http://i.imgur.com/nVk5EZS.png");
background-repeat: no-repeat;
background-position: 4px center;
width: 150px;
line-height: 0px;
text-indent: 0px !important;
padding-left: 24px!important;
background-color: rgb(17, 17, 17);
border-left: 4px solid rgb(84, 90, 99);
margin: 0px;
height: 32px;
border-right: 1px solid #333;
-webkit-transition: 0.5s;
-moz-transition-duration: 0.5s;
-htm-transition-duration: 0.5s;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
border-radius: 0px;
top: -2px;
position: relative;
}
body #fa_search #fa_textarea:focus {
width: 220px;
background-image: url("http://i.imgur.com/1jpriTU.png");
background-color: white;
color: rgb(40, 44, 49);
}
body #fa_toolbar #fa_right a.rightHeaderLink ,body #fa_share {
display: none!important;
}
#fa_toolbar #fa_menulist {
padding: 0px;
background: #EAEAEA;
border-radius: 0 0 3px 3px;
min-width: 340px;
margin-top: 7px;}
#fa_toolbar #fa_menulist li {
display: block;
background-color: transparent;
border: none;
height: 42px;
line-height: 42px;
padding-left: 20px;
margin-left: 150px;
}
#fa_toolbar #fa_menulist li:hover {
padding-left: 14px;
border-left: 6px solid #3995cd;
color: #fff;
background: #3a3a3a;
}
#fa_toolbar #fa_right .fa_separator {
display: none!important;
}
#fa_toolbar #fa_menulist :link, #fa_toolbar #fa_menulist :visited {
color: #999!important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
display: block!important;}
#fa_toolbar #fa_menulist :hover:link, #fa_toolbar #fa_menulist :hover:visited {
background: none!important;
color: white!important;
}
#fa_toolbar #fa_right.notification #notif_list {
right: 0px!important;
}
body #fa_right.welcome #fa_menu #fa_welcome {
background: -ms-linear-gradient(top,#77AC0B,#71a00e);
background: -o-linear-gradient(top,#77AC0B,#71a00e);
background: linear-gradient(top,#77AC0B,#71a00e);
background: -webkit-linear-gradient(top, rgb(119, 172, 11) 0%,#71a00e 100%);
background: -moz-linear-gradient(top,#77AC0B,#71a00e);}
body #fa_toolbar #fa_welcome {
background: #EAEAEA;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #000!important;
}
body #fa_toolbar > #fa_right.notification > #fa_notifications {
background: -webkit-linear-gradient(top, rgb(221, 110, 0%,#ff811f 100%);
background: -moz-linear-gradient(top,#DD6E08 ,#ff811f);
background: -ms-linear-gradient(top,#DD6E08 ,#ff811f);
background: -o-linear-gradient(top,#DD6E08 ,#ff811f);
background: linear-gradient(top,#DD6E08 ,#ff811f);}
body #fa_toolbar #fa_right #notif_list li {
border-top: 1px solid #faf9f9!important;
border-bottom: 1px solid #cbcbcb!important;
position: relative;
background-image: -webkit-linear-gradient(top,#f1f0f1,#e4e4e4);
background-image: -moz-linear-gradient(#f1f0f1,#e4e4e4);
background-image: -ms-linear-gradient(top,#f1f0f1,#e4e4e4);
background-image: -o-linear-gradient(top,#f1f0f1,#e4e4e4);
background-image: linear-gradient(top,#f1f0f1,#e4e4e4);}
body #fa_toolbar #fa_right #notif_list li.see_all {
background: black;
border: 1px solid black!important;
text-align: center;
}
body #fa_toolbar #fa_right #notif_list li hr {
border: none;
}
body #fa_toolbar #fa_right #notif_list li .contentText a {
color: #1E79A4!important;
text-decoration: none!important;
}
body #fa_toolbar #fa_right #notif_list li .contentText a:hover {
color: #d85724!important;
}
#fa_right {
float: right;
font-size: 14px;
margin-right: 20px;
}
2º - ADMIN PANEL -> DISPLAY -> TEMPLAES -> GENERAL
In [ic]Overall_header[/ic] find:
- Code:
<div id="page-body">
After that add following code:
- Code:
<span id="soloinvitadostopde32">
</span>
<!-- BEGIN switch_user_logged_out -->
<span id="soloinvitadostopde">
<a id="fa_welcome" onclick="showhide(document.getElementById('boxloginhf')); return false;">Sing In</a>
<a href="/register" id="fa_notifications" class="rightHeaderLink">Register</a>
<div id="boxloginhf" style="top: 23px; left: 1118px; display: none;">
<div class="sutlogin">
<form action="/login?redirect=/" method="post" name="form_login" id="signin">
<span id="str"> <label>Username:</label><input class="username" type="text" size="10" name="username"><label>Password:</label>
<input class="password" type="password" size="10" name="password"><p id="login_remember_p">
<input title="auto conectarse" class="login_remember_p" type="checkbox" name="autologin" checked="checked">Remember me on this computer</p>
<p id="buttonlogin"><input class="mainoption" type="submit" name="login" value="Submit"></p></span></form>
<script type="text/javascript">//<![CDATA[
$(function(){$('#signin').attr('action','/login?redirect='+this.location.pathname);});//]]></script>
</div></div></span>
<!-- END switch_user_logged_out -->
3º - Preview:
Permissions in this forum:
You cannot reply to topics in this forum|
|
|