-
Changing the colour of a template is really simple and basically involves two steps.1. Swap our old colour for our new one in the .css files.
2. Swap any instances of the colours that appear in any images in the template.
The second step is the hardest but with the right software and know how, it is not too difficult.For the purpose of this tutorial I will be converting the default colour of JA Larix from Orange to the Pink or Cherry colour of JA Trona (at the request of a member) but the steps I use can just as easy be used to convert any two colours in any template. It’s a fairly comprehensive tutorial so get a cup of coffee and in half an our or so we’ll be able to change any JA colour theme. If your template is on a remote server download the template folder to a local drive to make the changes.
BACK UP ALL FILES FIRST!!!!The first thing we have to do is get the HTML colour code for colour we want to change. The easiest way to do this is to download Firefox and use the Firebug add-on. The Firebug add-on allows us to identify .css settings, see HTML changes in real time for testing, and see layout parameters (padding and margins) very easily on ANY web page.
Ok so Step 1…
Open your website page in Firefox(FF) and click on the Firebug(FB) icon at the bottom right of you browser. A panel will open at the bottom of your FF browser with 2 panels inside it. On the left is the HTML for the page you are viewing and on the right is the styling (CSS) for the page.
Click the ‘Inspect‘ button.
Hover over the element you want to change. All instance of Orange on the page should be the same so it shouldn’t matter if we hover over a Header or Module Title or link or whatever. We just want the code for the colour used.
We will see a blue FB box appear as we move the mouse around the screen. This box is telling us what part of the page is being displayed in the FB panel.
Hover over the Orange ‘Products‘ Module Header and when the blue box is just as big as the header click you mouse. This will lock the FB panel to the ‘Products‘ settings.
We can now see all a wealth of information about this element in the FB panel…
If you click on the left of any style in the styles panel you can disable that style. Note that the next style for that element will then become ‘un-overuled’ (and may have the same setting). If you hover over colour codes a box appear displaying that colour. If we hover over color: #EE9600 we will see that that is the colour code we are looking for.
We use the same process to look for the colour code of the Pink in Ja Trona and we see that it is #D7025F
Now… we want to ‘Find and Replace’ all instances of #EE9600 with #D7025F throughout all our CSS files including menu.css files. The easiest way to do this is to use software called Windows Grep (Dreamweaver can do this too).
Download your template folder to your PC if it is on a remote server.
Download (it’s free) and install Grep from http://www.wingrep.com/
Open it up and enter the following settings. NOTE: The path to your ja_larix folder will be different.
Click OK and Grep will find all instances of EE9600 in the .css files of Larix
We can see that there are 10 instances of the colour in the CSS. Now Click the Find & Replace button and enter D7025F as our replacement text and click OK. Make sure that ‘In all files‘ and ‘Make changes to original‘ are both selected. Backup all your files first if you didn’t do it already.
When this is complete, upload your template files to your remote server overwriting the old files and you will see your new colours when you refresh your page. NOTE: Browsers sometimes keep CSS files in the cache so you may need to hold CTRL and click refresh to update the cache with the new CSS file.
Now our site looks rather ugly. We have our new colour set for headers, text, links, and borders, etc but we still have plenty of Orange on the screen. This is because these are images and changing CSS won’t alter them. We need to do that with an image editing programme.
There are several free image editing programmes that can ‘Replace colour’ but I’ll be using photoshop for this tutorial.
Joomlart templates often come with several colour variations. If we look at the images folder in our template folder we will often see the a folder called Green or Blue or whatever containing any images that change between one colour scheme and another.
This is very handy for knowing the images we are going to need to change. In JA_Larix there is a folder called Green with 8 files. It is these 8 files that we need to change in our default (Orange) images folder.
For the example of Replacing colour I am going to use the vm-cart-bg.gif but it’s the same process used to replace colours in all images.
NOTE: It is often much easier to download the Source Files for the purpose of changing colours.
Go to Image>Adjustment>Replace Colour> and make sure ‘fuzziness’ is set to 40
Click on the darkest part of the Orange. Hold the Shift key and click on several other parts of the orange ranging from the darkest part to the brightest part. Next click on the Results box. Enter D7025F as our new colour and click OK. If any of the image is still orange hold the shift key again and click on them. If the new colour is not exactly what you are looking for make tiny changes to the sliders to get the desired result. (I had to make the new color brighter and give it more saturation than just using D7025F)
When you have the desired result click the Save button on the Replace Colour dialog box give the file a name and save it. Then click OK and save your image replacing your old one (which you have backed up of course!)
Open the next image and go to Image>Adjustment>Replace Colour> and click Load and select the file you saved a minute ago. Click OK to replace the colour exactly as we did the last time and repeat this process over all necessary images. When you are finished go to your web page and Refresh. If you are not happy with the new images then go back and repeat the Replace colour steps above to get them right. If you still can’t manage it then post in the Image request thread found here… http://www.joomlart.com/forums/forum/logos-and-headers-modification-requests-new/
That’s it! You should now have a new colour scheme.
I hope people find this tutorial easy to follow and feel free to post below if you run into any problems.
You can see the finished result at http://www.my-test-site.info/larix
User: Demo
PW: pass0034
This topic contains 14 replies, has 10 voices, and was last updated by 
We moved to new unified forum. Please post all new support queries in our New Forum