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

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

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.

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).

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

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.

<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:

[class*="dd-color-"].magenta_black:before {
  background-color: #D51D55;
}
[class*="dd-color-"].magenta_black:after {
  background-color: #000000;
}

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.