Hello Hideki,

You can change this by adding css codes into your templates css file Below is the example css code to be put in the template css file:

/** To customize the main color of the toolbar **/

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

    background-color: #00948A !important;

    background-image: linear-gradient(to bottom, #00948A, #00948A) !important;

    border: 1px solid #00C7AB !important;

}



/** To customize the search area in the toolbar **/

body div#es-wrap .es-toolbar .es-navbar-search .search-query,

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

    background-color: #00B6AD !important;

}

replace the hex color code accordingly to the color that you want.

Thank you for your help.

Hello,I also would like to change colors of icons in the tab and button.I attached pictures.
Thank you for your help.

Hello Hideki,

Here are the CSS codes to change those buttons.

/** toolbar button

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

color: #B63A3A;

}



/** Share button

div#es-wrap .btn-es-primary, div#es-wrap .btn-es-primary:focus {

color: #fff;

text-shadow: 0 -1px 0 rgba(0,0,0,0.25);

background-color: #6BBAFF;

background-image: -moz-linear-gradient(top,#91c2ea,#6d9cca);

background-image: -webkit-gradient(linear,0 0,0 100%,from(#91c2ea),to(#6d9cca));

background-image: -webkit-linear-gradient(top,#91c2ea,#6d9cca);

background-image: -o-linear-gradient(top,#91c2ea,#6d9cca);

background-image: linear-gradient(to bottom,#3FA1F1,#6d9cca);

background-repeat: repeat-x;

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

border-color: #6d9cca #6d9cca #3e76ac;

border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

}

Hope this helps.

Hello, Nick.

I really appreciate your help. Thank you very much!

You are most welcome Hideki Glad that your issues are resolved now.

Hello,Mark.
I put css code like this
I would like to change button color to pink(#fa7789)

/** Share button **/
div#es-wrap .btn-es-primary, div#es-wrap .btn-es-primary:focus {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #fa7789;
background-image: -moz-linear-gradient(top,#fa7789,#fa7789);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fa7789),to(#fa7789));
background-image: -webkit-linear-gradient(top,#fa7789,#fa7789);
background-image: -o-linear-gradient(top,#fa7789,#fa7789);
background-image: linear-gradient(to bottom,#fa7789,#fa7789);
background-repeat: repeat-x;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#fa7789', endColorstr='#fa7789', GradientType=0);
border-color: #fa7789 #fa7789 #fa7789;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progidXImageTransform.Microsoft.gradient(enabled = false);
}

then,I found that when I point mouse cursor on share button, a blue line appeared under the button.
Could you tell me how to fix this ?
Thank you for your help.

Hello Hideki,

Can please try to put this code in your template CSS file? Please give it a try.

 

div#es-wrap .btn-es-primary:hover, div#es-wrap .btn-es-primary:active, div#es-wrap .btn-es-primary.active, div#es-wrap .btn-es-primary.disabled, div#es-wrap .btn-es-primary[disabled], div#es-wrap .btn-es-primary:focus:hover, div#es-wrap .btn-es-primary:focus:active, div#es-wrap .btn-es-primary:focus.active, div#es-wrap .btn-es-primary:focus.disabled, div#es-wrap .btn-es-primary:focus[disabled] {

color: #fff;

/* background-color: #6d9cca;





div#es-wrap .btn:hover {

/* color: #333; */

/* text-decoration: none; */

/* background-position: 0 -15px; */

/* -webkit-transition: background-position .1s linear; */

-moz-transition: background-position .1s linear;

-o-transition: background-position .1s linear;

/* transition: background-position .1s linear; */

}

Thank you very much Nick.
I have one more question about change the color.
I would like to change the color of toggle sidebar.
Please tell me how to change it.
Thanks.

Hello Hideki,

If you are on EasySocial 1.2, use these:

body div#fd.es .btn-sidebar-toggle

{

// Your custom css codes here

}

Also remember to add !important for the background colors.

Hello,Mark.
I do not use EasySocial 1.2 , because after I changed to EasySocial 1.2 ,language file had some problems.
So,I decide to use 1.1.6 right now.I will change to EasySocial 1.2 in end of March.
So,Please tell me how to change toggle sidebar with 1.1.6 virsion .Thanks.

Hello Hideki,

For 1.1.6, it should be like this,

body div#es-wrap .btn-sidebar-toggle

{

// Your custom css codes here

}

Thank you Mark,How to change hover of toggle sidebar ?when I point mouse cursor on toggle, a gray line appeared under the button.

I have a additional question about hover.
I asked about change color of hover on share button,and Nick told me add this code.
Should I need delete /* */ ←comment out in the following css code?


div#es-wrap .btn-es-primary:hover, div#es-wrap .btn-es-primary:active, div#es-wrap .btn-es-primary.active, div#es-wrap .btn-es-primary.disabled, div#es-wrap .btn-es-primary[disabled], div#es-wrap .btn-es-primary:focus:hover, div#es-wrap .btn-es-primary:focus:active, div#es-wrap .btn-es-primary:focus.active, div#es-wrap .btn-es-primary:focus.disabled, div#es-wrap .btn-es-primary:focus[disabled] {
color: #fff;
/* background-color: #6d9cca;


div#es-wrap .btn:hover {
/* color: #333; */
/* text-decoration: none; */
/* background-position: 0 -15px; */
/* -webkit-transition: background-position .1s linear; */
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
/* transition: background-position .1s linear; */
}

Hello Hideki,

I am really sorry for the delay of this reply as it is a weekend for us here. Yep, you can remove those "comments" if you want and to change the hover style,

body div#es-wrap .btn-sidebar-toggle:hover

{

}

Remember to use !important to ensure that your style definitions are always used.

Hello,Mark,OK,Thank you very much.

Hello Hideki,

You're welcome.