Editing the LUSH Template

I installed a new Joomla Template that I purchased from JoomlaShack. It is a very slick template with a style and feature set that I wanted. Unfortunatly, the colors weren't really what I wanted, so I decided to try to tweak the colors myself. It turned into a larger undertaking than I expected, but in the end, I learned how to use a new application, and I think the results were pretty good. Read on to see how to edit the JoomlaShack LUSH template.... I was able to change the colors on the LUSH template by following JoomlaShack's (rather sparse) instructions. It took some time, and was tedious, but it really wasn't that difficult (at least from my perspective.) There are a number of ways to change the images, but the recommended way by JoomlaShack is to use the "Macromedia Fireworks 8" application to edit the images. Unfortunately, Fireworks is not a cheap program (at about $200+ USD) but you can download a fully functional trial version from the Macromedia site for free. I'm actually considering investing in it because I now understand how to use it, but it is a lot of money.

The changes required two steps:

1. Modifying the graphics:
Using Fireworks, I opened the file "Fireworks_lush001.png" found in the "Graphic Source Files" folder of the LUSH template. This is where all the magic happens.

The entire template image set is contained in this one .png file.

I next clicked the bottom-left icon under the "Web" section on the Fireworks toolbar to "Hide slices".

Then I clicked on each graphic element that I wanted to change, clicked the color selector in the Properties pane, and adjusted the colors to my liking.

I did this for all graphic elements I wanted to change.

Next, I clicked the bottom-right icon under the "Web" section on the Fireworks toolbar to "Show slices".

Notice that this overlays "slice" outlines on the template. These slices define each graphic element, and were defined by JoomlaShack. Be sure to not change any of these slice definitions!

Finally, I exported all the images using "File > Export" from the menu. I then copied these new images to replace the originals in the template.

2. Tweaking the CSS code:
I then made some minor updates to the CSS file changing some of the color codes using a text editor. This really took a lot of trial and error because I'm not a CSS expert, and the template CSS, though documented, can be difficult to decipher. I still have some color tweaks left to do, but they should be minor.

Tip #1:
Be very sure to save a backup of ALL of your original template files before you make any changes! You never know when you may want the originals.

Tip #2:
Should you decide to attempt making changes, I suggest creating a new "mainmenu" item in Joomla that refers to any existing page. Call it something like "Test Page", or some such. Then assign the LUSH template to only that page. You can then tweak to your heart's content without affecting the rest of your site.

Tip #2:
Joomla Template files are simply .ZIP files containing the required files. You should be able to easily replace CSS files and image files within the template file. You could install and uninstall and install to test changes, but there's an easier way. I did all of my editing (graphics and CSS) offline . Instead of uninstalling and re-installing the template, I just manually uploaded (via FTP) any changed files directly to the template directory on my Web host. Once I got things to where I liked them, I then downloaded the whole template directory as a backup.

The process is certainly not for the faint of heart, but it is certainly customizable, and the results can look pretty good.

Thanks to Andrew Smith of the UK for his interest in modifying the LUSH template. His inquiry was my inspiration for this tip!