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.
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;
}
