Making a New Color Scheme

You will probably want to customize beyond this guide, but this will certainly point you in the right direction. Every copy of UserSpice 4 includes an un-minified standard.css file that you can edit to your heart's content.  If you lost yours, you can download one from this page.   The quickest way to customize your CSS is to copy the standard.css and rename it.  You have the option to "show css samples" on the Admin Panel, which is the quickest way to get an idea of how the features you use most will look. From there, the best thing to do is to get a pleasing color pallet online or make your own.  You will need at least 6 colors to fully utilize the UserSpice features.  In general the "hover" color is a little darker than the each color in the pallet, but it can be a little lighter also.  Ideally, you want to go all lighter, or all darker.

To customize your color scheme, you'll want to do a find/replace through your new css file.  I'll give you which HTML color code is the default for each action and you replace it with your new color.   You can use this html color picker to get your 6 digit codes.

Download the official UserSpice 4 CSS Pack here.

Here are some of the colors you might want to find/replace…

CSS Find/Replace

2c3e50 Primary
1A242F Primary Hover

3498db Info
217DBB Info Hover

f39c12 Warning
C87F0A Warning Hover

e74c3c Danger
D62C1A Danger Hover

0047b3 Success
003380 Success Hover

95a5a6 Default
798D8F Default Hover

19222E Link Hover Color

Notes

Whatever color you use for your primary button is also the text color for the site.

Whatever color you use for your success button is the default link color

The navbar color is listed as .navbar-default and is on line 4502

The body background color can be changed on line 1093

The hover over color for the buttons in the navbar is actually in sb-admin.css, line 69

The link and link hover sections are right around line 1100

Tips and Tricks

I've noticed that most of the downloadable bootstrap templates just look kind of "off" on UserSpice. The most glaring thing seems to be that they use the same color as the success button for links…and that's usually green. There's usually a simple fix for that. Flip the info and success button. Here's a tip on how to do that.

Step 1 – Find both the hover and standard colors for both the info and success buttons, and copy/paste the color codes. Label them. You should have 4 color codes and labels saved.

Step 2 – Search the entire document for the color of the success button. Do a find and replace using this method. Replace the letter/number with one higher than the original one. For example, if it was 217DBB do a find/replace and make it 217DBC. Do that for the hover color of the success button too.

Step 3 – Do a find/replace of the info button standard color with the ORIGINAL color of the success button. Do the same for the Hover.

Step 4 – Do a find and replace of the RENAMED color for the success button. Rename it the ORIGINAL cover of the info button. Sounds complicated, but it's not.