Color Scheme Editing Trick

With Joomla! there are basically two ways to edit the color scheme of your template.

One way, the easiest way, is to choose a preset color scheme Joomla! provides with your chosen template. However, it doesn’t allow for an exact color match with logos or custom colors (unless you choose the black or white template).

Photo by Ricardo Gomez Angel on Unsplash

The other method in editing the color scheme of your site is a little more involved:

  • Download all images that contain colors used in your chosen template.

    For the sake of making simple color changes in Photoshop, I suggest using the images from the template/images/black directory.
  • Open all images in Photoshop and make your changes.

    Depending on your ninja skills, you may already have several different techniques for making a pure color change. First, using black and white images is advantageous when using the magic wand. To make a selection or when using the “color range” dialogue box from the select menu. Next, once you’ve made your selection you can simply use the fill or gradient tool to get the color you want. Another simple way to achieve a pure color change is using the hue/saturation tool (ctrl-U), sliding the hue bar until you have the desired color. However, the problem with this method is you have to eye-ball the color match. Also, you have to use images from one of the color directories instead of the images you’ve already downloaded from the black template image directory.
  • Upload Images.

    Once you have made satisfactory color changes to each of the images and saved them without changing the file name, simply upload all of the files to the same directory you first downloaded them from. The files will overwrite the originals, so make a backup copy of them if you think you will ever need them again. Make sure your template color is set to “black” or whichever color directory you uploaded the files to.
  • Edit any remaining Background Colors that you want or need to change.

    The page background and outer wrapper background colors are controlled by CSS in the black_bg.css file, or whichever color_bg.css your template is set to. Simply replace the color code with your desired color’s number and done! Or insert a repeating image, gradient, whatever!

See how easy that is? Now you are a Joomla! template-color-changing-Photoshop-Ninja!


Are you looking for a new Joomla! Site? Do you just have some questions? Please visit our Web Design Site to see our list of web-based services.
Need emergency server repair, or just a regular IT guy for your Small Business? Technogizmo is here for you, contact us to learn more about how we can find affordable IT solutions for your business.