Perhaps you have found a really good Joomla! Template but you want to change the color scheme. You know how to change the colors in the CSS style sheet but what about those gradient images provided that are now the wrong color?

First, get the image properties of the gradient you need to change. It’s easy in Firefox – right-click on the image and choose ‘view Background Image’. When the image opens, right-click again on the image and choose properties. In properties it will give you the dimensions (width always first, height second). Write them down… At this stage, also make a note of the filename of the image as it will be easier for you to use the same filename for your new image – noting whether it is a.png or a .jpg.

For this example, I made 100px x 100px images using the dark gray at the top of this blog (#191a1a) and the light gray at the bottom (#c0c0c0) adding the red (#990000) and white (#ffffff) for the 4 color. This time I chose to make .jpg files.

Of course you can make gradients in your favorite graphics program but this is the easy way – try this online Gradient Tool!

To use, simply replace the original gradient image with your new one in your template images folder.