Customize the Salonify Theme Colors

This Help File will explain how to customize the color scheme and background for the Salonify 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.

salonify-primary-and-complimentary-colors.jpgScreenshot above labels some of the @Primary (1) and @Complimentary (C) locations on the homepage

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

You can edit your theme colors for the Salonify 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 at approxiamately Line 11 and you'll see the @primary, @secondary, and @complimentary Hex color codes to change as well as the @background which by default uses a background image that you can change or you can simply select a HEX code for your background as well. 

Here is a screenshot of what you are looking for:

salonify-LESS-hex-codes-for-theme-colors.jpg

Here are some examples of what each Color in the LESS Stylesheet effects on your Site:

@Primary Color

  • main navigation background color
  • headers of homepage spaces background color
  • H2/H3 Colors for text on internal pages

@Secondary Color

  • Doesn't effect the Salonify Theme

@Complimentary Color

  • color on main nav when you hover
  • links on pages
  • text color in stories rotator

Changing Your Homepage Sidebar Spaces Background Color

The Salonify Theme Homepage has sidebar Spaces that come with a black background by default.  If you'd like to change the background color of the spaces, you'll return to your theme's LESS stylesheet in the theme editor. 

Look for the #home-sidebar line at approximately line 192, as shown in the image below: 

salonify-sidebar-background-LESS-code-lines.jpg

To change the background color of the sidebar spaces, change the background: #000 in line 193 highlighted in blue above to the color hex code that you would like.  You can also change the background color to match your @primary, @secondary, or @complimentary colors.

For example, to change the background to match your @secondary color, you would change

background: #000

to

background: @secondary

Then you'd save your Stylesheet.

Here is a screenshot of the sidebar spaces with an updated color for the background: 

salonify-sidebar-with-background-colors-changed.jpg

Change the Homepage Rotator Border

Your homepage rotator has a white border by default.  You can customize the color of this border in your theme's LESS Stylesheet in the theme editor. 

salonify-LESS-Hex-codes-for-rotator-border-color.jpg

To do this, look for "Homepage Content" on the stylesheet at about line 162, as shown in the screenshot above.  Beneath that, you'll find a line that begins with:

#rotator { .grid(9); position: relative; margin: 0; float: left; border: 10px solid #fff; margin-bottom: 20px; }

and you'll be changing the hex code bolded above: #fff to the color you prefer.  You can also change the color of your rotator border to match one of your site's @primary, @secondary, or @complimentary colors.  For example, to change the border to match your @primary color, you would edit: 

solid #FFF

to show

solid @primary

Then you'd save your Stylesheet.

Here is a screenshot of an example site with the rotator border updated to match the site's @primary color.  The blue arrows point to the border of the rotator. 

salonify-rotator-border-color.jpg

Change the Header Background

Your homepage header has a black background by default.  You can customize the color of this background in your theme's LESS Stylesheet in the theme editor. 

salonify-LESS-hex-codes-for-header-background-color.jpg

To do this, look for "Base Layou" section on the stylesheet, as shown in the screenshot above.  Beneath that, you'll find a line that begins with:

#header { .center; background: #000; width: 100%; padding: 10px 0 0 0; margin-bottom: 56px; }

and you'll want to change the hex code bolded above: #000 to the color you prefer.  You can also change the color of your header background to match one of your site's @primary, @secondary, or @complimentary colors. For example, to change the background to match your @secondary color, you would edit: 

background: #000

to show

background: @secondary

Then you'd save your Stylesheet.

Change Homepage Background

The Salonify Theme uses an image for the homepage background.  The default image is a textured gray and white .PNG graphic and you can change the background of your site by replacing the image or simply selecting the HEX codes for a solid color you'd prefer to use.  Here are the steps to replace the background with a new image and then the steps to change the background to a solid color.

Replace the Image

Go to the LESS stylesheet for your theme inside the theme editor and upload the background image you want for your new background.  Make sure the image is saved as a high quality .PNG graphic and is between 300 x 200 and 500 x 300 in pixel size.  Remember the file name of your background image because you'll need to refer to it later. 

To upload the file, look in the lower right hand side of your theme editor for an Upload file section that looks like this: 

upload-a-new-theme-file.jpg

After your file is uploaded, you'll need to navigate back to your LESS stylesheet in the theme editor.  Now you'll look underneath the "LESS CSS Styles" section for the line that says:

@background: url("../images/bg.png");

Here is a screenshot of the theme editor with the line highlighted in yellow: 

salonify-background-image-theme-editor-LESS-code.jpg

You'll need to change the url link for the @background to look for your newly uploaded background image.  To do this, replace the line: 

@background: url("../images/bg.png");

to

@background: url("/themes/salonify/templates/yourimage.png");

Replacing "yourimage" with the name of your image file that you want to use for the new background.  For example, in the screenshot below, I have uploaded an image file called plaidbg1.png and here is how it looks in the LESS stylesheet: 

salonify-change-background-image-in-theme-editor.jpg

Now save your changes and you should have a new background image on your homepage. 

Change the Background to a Color

Changing the background of the salonify theme to a solid color is easy.  Refer to the information above on replacing the image to locate the @background setting.  Find the HEX codes for the color you want your background to be and then you'll simply change the line that says: 

@background: url("../images/bg.png");

to have the HEX code instead of the image.  For example, using the HEX Code #FFFFFF for my background - the line would look like: 

@background: #FFFFFF;

After updating the @background with your HEX code, save your changes. 

Clear Your Cache

When you are editing the theme's stylesheet and other files in the theme editor, you will want to clear your browsers cache to review the changes many times.  Your new changes may not show up right away unless you clear your cache, which is a quick task to perform.  Read this help file on How to Clear Your Browsers Cache in 5 Seconds to learn how to clear the cache on your web browser. 

Did this Help File answer your question?  If not - email your question to our support team or visit our Tendenci Forums for more help!