This Help File will explain how to customize the color scheme and background for the ThinkSmart Theme.  Some basic knowledge of CSS and HTML is recommended before you attempt to change your site's theme colors and you can check out our Resources Guide for Tendenci Community Theme Customization with links to recommended tutorials for CSS and HTML if you need a little more help.

Screenshot above labels some of the @band (1), @no-band (2) , and @Background (B) color locations on the homepage

Go to Your Site's LESS Stylesheet in the Theme Editor

You can edit your theme colors for the ThinkSmart theme by going to the LESS Stylesheet in your site's theme editor.  To simplify finding the stylesheet, simple replace "examplesite.com" with your site's URL followed by the rest of the url in this example: 

http://examplesite.com/theme-editor/editor/?file=/media/css/styles.less

Look for the LESS CSS Styles section you'll see the different default color options included with the ThinkSmart theme, and the additional CSS to customize with your desired HEX codes.

Here is a screenshot of what you are looking for:

Use a Default Color Scheme

The ThinkSmart Theme has 8 default color options included in the stylesheet.  All but the Blue one is commented out using CSS commenting when you first install the theme. 

If you want use one of the default color schemes included, then all you need to do to change the colors is add CSS comments "//" in front of the first line that says:

@base: spin(@main, 0); @logo: "blue"; 

and remove the CSS comments from the line that has the color theme you want to use.  For example, if you wanted to use Purple instead of Blue, you're stylesheet should look like this: 

Use Custom Colors

Customizing ThinkSmart with your own colors can be a little trickier.  

The first step is to select your HEX Codes for your theme colors and have them handy. 

Then, you want to go into the stylesheet and change some of the basic code in the LESS CSS Styles section.  I'll explain which lines you may want to change depending on your preferences using the screenshot example below:

I have highlighted, in yellow, the most common lines in the stylesheet that you may want to change to customize the colors of your site.   

1) Change the word "blue" to "custom" as shown in line 13 above.

2) Find the line beginning with "@main" and change the hex code "#356FD1;" to the Hex Code you'd like as your default theme color and then change  "// Blue" to "// custom" so it looks like line #33 in the example, but with your own custom Hex code.

** The way the ThinkSmart theme is designed, @main currently controls the entire theme's overall color scheme.  If you simply want a different color option than the 8 standard ones included, you would only need to change @main's Hex Code to change the entire theme's color scheme. **

3) Change your @band (1) color by replacing "@base" with the HEX Code you want to use for your navigation, footer background, and featured background colors.  Refer to the numbered Homepage Image at the beginning of the help file and you'll see that this is the @band (1) so the spots where I've labeled a "1" are where this color would appear. 

4) Change your @no-band (2) color by replacing "lighten(@base, 46%)" with your HEX Code that will appear where the "2" is on the Homepage Image.  

5) Change your @background (B) color by replacing "#424242" with the HEX Code for your desired background color identified in the Homepage Image as "B". 

** Remember to include a # before each 6 digit HEX code and end the line with a semi-colon when you are editing your LESS stylesheet **

** Currently, @primary only affects the main navigation's dropdown menu color when you hover.  You can change this to a Hex code, or leave it as @base. **

6) Be sure to save your changes in the theme editor, then clear your cache and check out your homepage to see if you are happy with the color scheme. 

Adjust Site Name Font Size in Header

If you have a long organization name, then it may not display correctly in the header on the ThinkSmart theme and you'll want to adjust the font size to make it smaller.  

From your LESS stylesheet, scroll down to the section called "Base Layout" as shown in the screenshot below: 

Look for the #logo container and find the line below that that begins with "h1".  You'll see in the image above that I've highlighted "font-size: 46px;" in blue.  This is the line where you can change the font size.

To adjust the size, simply change "46" to a smaller number.  Typically numbers between 32px-40px work pretty well.  

If you were to change the font size to 32px then, the change would look like "font-size: 32px;"