Style the Easy Social Toolbar - Custom CSS

Style the Easy Social Toolbar - Custom CSS

I have been using Easy Social since Stack Ideas released it. I even migrated from JomSocial to the EasySocial platform. One thing that has always bugged me is that the default toolbar is blue. Some sites (Like this one) and others just don't work well with that color. Facebook isn't everything. 

So with some help from the StackIdeas team, I was able to create my own custom CSS and override the default colors. Adding this code to your custom.css for your template will produce a nice black toolbar that should work with most any site. Feel free to change the hex colors to accomodate your own design.

toolbar es

 Here is the code to add to your file:

body div#fd.es .es-toolbar .navbar-inner {

background-image: -webkit-linear-gradient(top,#3E444E 0,#000000 100%);

background-image: linear-gradient(to bottom,#3E444E 0,#000000 100%);

border: 1px solid #454545;

}

body div#fd.es .es-toolbar .fd-nav>li>a [class^="ies-"], body div#fd.es .es-toolbar .fd-nav>li>a [class*=" ies-"] {

vertical-align: top;

position: relative;

width: 20px;

height: 14px;

line-height: 14px;

color: #FFFFFF !important;

font-size: 14px;

text-align: center;

}

body div#fd.es .es-toolbar .fd-navbar-search {

background: #404040;

}

body div#fd.es .es-toolbar .fd-navbar-search .search-query {

background: #404040;

}

body div#fd.es .es-toolbar .fd-nav>li>.dropdown-toggle_>.caret {

border-top-color: #FFFFFF;

border-bottom-color: #3a77b6;

}

body div#fd.es .es-toolbar .divider-vertical {

border-left: 1px solid #FFFFFF;

border-right: 0 solid #FFFFFF;

}

body div#fd.es .btn-es-success, body div#fd.es .btn-es-success:focus {

color: #fff !important;

background-color: #b30000 !important;

border-color: #5c0000 !important;

}

body div#fd.es .btn-es-primary, body div#fd.es .btn-es-primary:focus {

color: #fff !important;

background-color: #3e444e !important;

border-color: #454545 !important;

}

body div#fd.es .btn-es-primary, body div#fd.es .btn-es-primary:focus {

color: #fff!important;

background-color: #810d05 !important;

border-color: #454545 !important;

}

body div#fd.es .btn-action-friends.is-friends, body div#fd.es .btn-action-friends.is-friends:hover, body div#fd.es .btn-action-friends.is-friends:focus {

background-image: -webkit-linear-gradient(top,#404040 0,#404040 100%);

background-image: linear-gradient(to bottom,#454545 0,#404040 100%);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8dbde6',endColorstr='#ff72a1d1',GradientType=0);

color: white !important;

}

body div#fd.es .btn-action-followers.is-following, body div#fd.es .btn-action-followers.is-following:hover, body div#fd.es .btn-action-followers.is-following:focus {

background-image: -webkit-linear-gradient(top,##404040 0,#404040 100%);

background-image: linear-gradient(to bottom,#454545 0,#404040 100%);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8dbde6',endColorstr='#ff72a1d1',GradientType=0);

color: white !important;

}

body div#fd a:hover, body div#fd a:focus, body div#fd a:active {

color: #FF0000;

}

body div#fd.es .data-relationship-display-type .btn-delete {

top: -2px;

right: 0;

position: absolute;

color: #FF0000;

}

div#fd.es .es-toolbar .fd-nav > li > a .fa {

    color: white !important;

}

If this helps you, let me know in the comments, I love getting feedback from other Joomla designers.
Changing Phoca Download Button Styles & Classes
Joomla Tutorial: Purity III - Add Module Position ...

Related Posts