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] Forumotion Toolbar Style v2

Foto

[CSS] Forumotion Toolbar Style v2

by ,


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

1
Offline

  Shadow

Shadow
Administrator
Administrator
2014-05-24, 08:51

[CSS] Forumotion Toolbar Style v2 Reglem10
Tutorial: Forumotion toolbar - new style

Newly styled toolbar.


--> Tutorials, tips and tricks <--
Forumotion toolbar - new style



1º - CSS
Code:
[panda=css]
    #fa_search #fa_magnifier:hover {
    background-color: #EBEBEB!important;
    } 
    #fa_right a.rightHeaderLink {
    margin-left: 10px;
    vertical-align: top;
    line-height: 30px;
    color: #FFFFFF;
    border: 1px solid #1b7fcc;
    padding: 0px 5px 0px 5px;
    background: #1b7fcc;
    color: #fff;
    margin-top: 10px;
    font-weight: bold;
    font-size: 11px; 
    }
    #fa_right {
    float: right;
    font-size: 14px;
    margin-right: 30px;
    }
    #fa_toolbar #fa_right #notif_list {
    font-size: 11px;
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #fff!important;
    border: 2px solid #dbdbdb!important;
    border-top: 0px solid #FFFFFF !important; 
    z-index: 999;
    margin-top: 8px !important;
    }
    #fa_toolbar #fa_right #notif_list li.see_all {
    color: #666;
    background-color: #dbdbdb !important;
    padding: 0.7em !important;
    text-align: left;
    }
    #fa_toolbar #fa_right #notif_list li.see_all a {
    background-image: url(http://i.imgur.com/q8KOgBu.png);
    background-position: 0% 50%;
    background-repeat: no-repeat;
    padding-left: 10px;
    color: #666!important;
    width: 140px !important;
    }
    #fa_toolbar #fa_right #fa_notifications.unread #notif_unread {
    background-image: url(http://i.imgur.com/YgXineA.png);
    background-position: 15px 0px;
    background-repeat: no-repeat;
    display: inline;
    padding: 7px 20px 7px 0;
    color: #666;
    }
    #fa_menulist {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0px;
    padding: 0px 10px;
    min-width: 175px;
    width: auto;
    line-height: 32px;
    z-index: 999;
    margin-top: 8px !important;
    border-top: 0px solid #FFFFFF !important; 
    background: #fff !important;
    border: 2px solid #dbdbdb !important;
    }
    #fa_toolbar #fa_hide {
    display: none !important;
    } 
    #fa_icon, #fa_toolbar #fa_service {
    color: #666 !important;
    }
    #fa_search #fa_magnifier {
    background: #f0f0f0 !important;
    background-image: url(http://i.imgur.com/fC96pEG.png) !important;
    background-repeat: no-repeat !important;
    background-position: 40% 40% !important;
    border: 1px solid #c6c6c6 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.10) !important;
    position: absolute !important;
    height: 24px !important;
    margin-top: 8px !important;
    width: 50px !important;
    margin-left: 300px !important;
    }

    #fa_share {
    margin-left: 20px;
    font-size: 16px;
    line-height: 30px !important;
    display: none !important;
    }
    #fa_right #fa_notifications, #fa_welcome {
    background: #f8f8f8;
    border: 1px solid #d3d3d3;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    color: #333!important;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    }
    #fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
    background: #f8f8f8;
    border: 1px solid #d3d3d3;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    color: #333!important;
    margin-top: 10px;
    background-image: url(http://i.imgur.com/6vtRpv0.png);
    background-repeat: no-repeat;
    background-position: 100% 40%;
    padding-right: 30px;
    font-weight: bold;
    font-size: 11px;
    }

    #fa_search #fa_textarea {
    text-indent: 10px !important; 
    border: 1px solid #ccc!important;
    box-shadow: inset 0 1px 2px #eee!important;
    height: 24px!important;
    line-height: 24px!important;
    margin-top: 8px!important;
    padding: 0!important;
    width: 300px!important;
    border-radius: 0 !important;
    }
    #fa_left {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    line-height: 30px !important;
    margin-top: 10px;
    }
    #fa_toolbar {
    left: 0px;
    height: 50px !important;
    color: #666 !important;
    font-family: Helvetica, Verdana, Arial;
    font-size: 16px !important;
    z-index: 999;
    background: #fff !important;
    border-bottom: 2px solid #e8e8e8 !important;
    }


2º - Preview
[CSS] Forumotion Toolbar Style v2 Untitled



© PunBB Design


[CSS] Forumotion Toolbar Style v2 Act_bottom If you have any questions related to this topic create a topic with the following title:
Forumotion toolbar - new style

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

2
Offline

  Abdalah tupe

Abdalah tupe
Punbb Rookie
Punbb Rookie
2014-05-24, 12:32
Wow you are amazing Shadow,But I have problem with my phbb3 search box in tolbar

Look in the theard :

https://punbb-design.forumotion.com/t480-search_box-problem-forumotion-toolbar-style-v2

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

3
Offline

  Van-Helsing

Van-Helsing
★Moderator★
★Moderator★
2014-05-25, 19:29
Thanks

Powered by PunBB
Currently 0 users have thanked Van-Helsing for this post:

4
Offline

  Michael_vx

Michael_vx
Punbb Junior
Punbb Junior
2014-05-26, 22:39
hi the skin is great but there is little problem search box wont work phpbb2

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

5
Offline

  puppycheese

puppycheese
Punbb Rookie
Punbb Rookie
2015-02-17, 07:25
The search bar doesn't work with punbb

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

6
Offline

  Andrei34

Andrei34
Punbb Rookie
Punbb Rookie
2016-05-19, 16:31
very good tuto thx

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

7
Offline

  Darence Elias

Darence Elias
V.I.P. Member
V.I.P. Member
2016-06-27, 13:26
Thanks

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

8
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™.