How to add a new color scheme to your RSJoomla! template

in Development, Templates on 25 Mar 2015 having 1
How to create your own color scheme for RSJoomla! templates

The default color schemes that come with our Joomla! templates don't really suit well the direction that you had in mind? Read this post to learn how to implement your own.

The template's stylesheet does not contain any colors, the color styling is done on a distinct stylesheet. These stylesheets can be found here (I will use RSPenta! as example, but you can use the same principle for all of our Joomla! templates):

/templates/rspenta/css/theme

In this folder you can find different files, each with it's own descriptive name e.g. : blue_black.css

How does Joomla! now how to load the proper stylesheet? That's simple, the Joomla! templates has a XML file which handles the template options/parameters and you can find it here:

/templates/rspenta/templateDetails.xml

What do you need?

Before we get started you will need the following:

  • Basic CSS knowledge - you can find a great deal of information in this website;
  • Code Editor - I would recommend Notepad++;
  • A FTP Client - FileZilla is a good FTP client that you can use.

How to

Easiest way to start is to use an already existing stylesheet. Head over to the theme folder ( /templates/rspenta/css/theme ) and copy one of the themes (for this example, we will use blue_black as reference) and paste it with a different name - let's say magenta_black.css

Open the new stylesheet (magenta_black.css), and change the colors for Blue (for this case is #0f8bb4) to Magenta (example #D51D55).

NOTES:

Easiest way to retrieve the colors is from the droplist.css ( /templates/rspenta/classes/theme ) stylesheet, the primary color will always be in :before and the secondary in the :after selector.

e.g.
 
[class*="dd-color-"].blue_black:before {
  background-color: #0f8bb4;
}
[class*="dd-color-"].blue_black:after {
  background-color: #000000;
}
 

This can easily be done by using CTRL + H in the stylesheet window (in Notepad++) and replace #0f8bb4 with #D51D55.

Shades (and even RGBA colors for transparent backgrounds) of the colors are being used, make sure to change those as well.

After you've finished adding the colors (most likely, you will come back to this step for adjustments later on), it's time to add it as a template option.

Edit /templates/rspenta/templateDetails.xml

and around line 106 you should find this:

<field name="templateTheme" ... >

add your new color to the list using the same syntax as the other options.

e.g.
 
<option value="magenta_black">Magenta Black</option>
 

Although you have added the option, if you take a look at the Color Schemes in the Template Manager at this current moment, you will see 2 white rectangles. In order to change this, we will have to add it to the droplist.css file and add at the bottom of the stylesheet - Before End Theme Colors - the colors of the template as per the following example:

e.g.
 
[class*="dd-color-"].magenta_black:before {
  background-color: #D51D55;
}
[class*="dd-color-"].magenta_black:after {
  background-color: #000000;
}
 
Selecting the new theme

Time to take the new theme for a spin. Login to your Joomla!'s administrator panel > Template Manager > RSPenta! > Details Tab > Color Scheme.

You should see your new color scheme in the list - should be the last one, choose it and click save. If you followed the steps above, the front-end of your website should match the colors you used in your stylesheet.

Additional note:

Keep in mind that when you will update the template, the files will be overriden and we recommend creating a backup of these files so you don't lose them.

A good place to look for inspiration on choosing new colors for your template are the following websites: Color Combos and Color Lovers.



Subscribe to our blog

Found this article interesting? Subscribe to our blog for more.



Gravatar
Colin Brace - 06.04.2015 (14:48:58)

Really helpful, thanks for this.

Quote
0

1000 Characters left