Josh Lewis wrote:

What do you mean doesn't like to be modified externally? My method for modifying extension styling is to add CSS to the actual template itself (doesn't matter which style sheet). So to make EasySocial have a dark header I would add the following code to your template css file:

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

background-image: -ms-linear-gradient(top, #555555 0%, #222222 100%) !important;

background-image: -moz-linear-gradient(top, #555555 0%, #222222 100%) !important;

background-image: -o-linear-gradient(top, #555555 0%, #222222 100%) !important;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555555), color-stop(1, #222222)) !important;

background-image: -webkit-linear-gradient(top, #555555 0%, #222222 100%) !important;

background-image: linear-gradient(to bottom, #555555 0%, #222222 100%) !important;

}



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

background: #333333 !important;

}

The important statements overwrite any of the original code. Keep in mind that you will probably need to clear your cache to see the changes. The example above changes the header but is by no means complete to the rest of the site. I suppose if folks would like I could create the styling for a dark theme or whatever coloring. I may not be uber good with PHP and such, but I know my CSS very well.

In case anyone is interested in how I got this code I used FireBug to get the selectors and used a gradient generator to get the color codes. Then I injected important statements and modified the final color to one that is in between the gradients.

Hello Josh,

I have been asked to create an EasySocial Lesson Guide for changing the colors in EasySocial toolbar and for the buttons and it is more involved than I thought. I was wondering if you might take a bit of time to give me some quick step by steps so I can create a more detailed tutorial guide? I can create all the images etc, I need to find out the best way to do this so I give people the best tutorial Guide, and since you are far more knowledgeable with this than I am I was hoping you might share some Steps for me to share the lesson guide with others. I will make sure to Credit you in the Guide. Thanks if you have any time. It would be much appreciated.

Randall

Step 1:
Step 2:
Step 3:
Step 4:
etc.

Here is the question about creating a tutorial Guide - Can you please create a tutorial showing me how to change some colors on ES like the tool bar and some buttons?

Hi Randall,

Can you please create a tutorial showing me how to change some colors on ES like the tool bar and some buttons? Then show me how to save the changes in my template override folder so i won't have to do it again when ES has an update. I have extplorer already and made a change to the email logos thanks to your tutorial. I know this will take up your time but i would greatly appreciate it!!!! PLEASE HELP ME!!!!!

Antonio,

I have been working on this tutorial for some time and it is important to create the best correct method lesson tutorial for you and others, so you don't make any mistakes in the css code and mess your site up. This Lesson Guide is more involved than I thought:

2 other discussions on changing EasySocial colors for the toolbar:

http://stackideas.com/forums/color-change-easysocial#reply-101697
http://stackideas.com/forums/color-change#reply-129586

I have found some information on the Tutorials and I will be asking for some help from other more knowledgeable EasySocial administrators such as Josh Lewis, as he has done this color change before. When I get the tutorial completed I will post it. At this time it will most likely be Wednesday, March 19, 2014 and I will notify you in this forum discussion.

I am adding the Monday tutorial within a few hours. It is 2:22 pm MST in Canada and I want to make sure to add a new Lesson Guide each day so I will get back to the Monday lesson to finish it and then I will be back to researching and finishing up the How to Change the Color of the EasySocial Toolbar and buttons?

Randall

Thanks for sharing this Randall Greatly appreciate this!

Hey @Randall M, Did you ever create this guide?

Paul wrote:

Hey @Randall M, Did you ever create this guide?

Paul,

No I have not created this guide yet. I was very busy with my site development up until the end of April and I had this and a few other things slated on my TO DO list and I had a rollerblading accident and broke my shoulder (dominant mouse arm) in 3 places, and although I am recovering well after the 5 1/2 hour operation on May 4, my progress to type and move my right arm and get things done is very slow.

Maybe I can get to this some time in late June.

My first order of business when I can type better is to post my new 'twice used' rollerblades up on Kijiji.com - I am sticking to walking and hiking...

Wow, sorry to hear that. Take it easy.

My interest is mostly academic anyway. So thanks for your efforts.

I'll post here when I have completed the Guide.

Thanks Randall