Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Board Index » Forumotion » Tutorials  »  [OLD] Tutorials & Codes »[CSS] Stylized FA Toolbar

Foto

[CSS] Stylized FA Toolbar

by ,


View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

Shadow
Administrator
Administrator
2013-09-07, 11:24

[CSS] Stylized FA Toolbar Alerte1
Tutorial: Stylized FA Toolbar

Improved design of Forumotion toolbar similar to PunBB Community.


--> Tutorials, tips and tricks <--
New looking Toolbar



1º - CSS
Code:
[panda=css]#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º - HTML Edit
In [ic]Overall_header[/ic] find:
Code:
[panda=html]<div id="page-body">

After that add following code:
Code:
[panda=html] <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:
https://i.imgur.com/Mj4OBoy.png



© PunBB Design


[CSS] Stylized FA Toolbar Act_bottom If you have any questions related to this topic create a topic with the following title:
New looking Toolbar

Powered by PunBB
Thanks
Currently 0 users have thanked Shadow for this post:

2
Offline

  Zyon

Zyon
Punbb Guru
Punbb Guru
2013-09-07, 16:16
Hey, it's grate tutorial!

Thanks for share Smile

Powered by PunBB
Currently 0 users have thanked Zyon for this post:

3
Offline

  Shadow

Shadow
Administrator
Administrator
2013-12-21, 18:38
The code has been updated.

Powered by PunBB
Thanks
Currently 0 users have thanked Shadow for this post:

4
Offline

  Destroya*

Destroya*
Punbb Senior
Punbb Senior
2014-12-03, 17:19
Great toolbar! Is there a reason why it doesn't display on the homepage (Forum)?

Powered by PunBB
Currently 0 users have thanked Destroya* for this post:

5
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.