Forum Support

Advanced Search


Offline jingli
Free Member
Posts: 66
Posted on: January 03, 2009, 07:54:21 AM

Changing the colors of eTensity template
The original template looks good in black, but maybe you would like som other color? Shape5 provides the full Photoshop files for the design so we can change to what we like, if we only new how to do it!
Follow these easy steps Wink
(Screendumps are from Photoshop CS4 for mac)

Download the two PSD files, one for the template and one for the drop down cart in the eTensity download section.
These are Photoshop files in layers already sliced and named for saving with the 'Save for Web and Devices' function.

I'll start with the drop down cart, the template is a bit more complex and I don't have the time to go through all the steps there in detail. Maybe you figure it out by yourself, otherwise you can ask and I'll try to help.

Changing the colors of the s5 Drop Down Cart
Open the cart_module.psd in Photoshop, it should look like this:

The two folders named Background contains the black background, and these are the ones that needs to be changed. In fact only one of them, as you can copy it and move it afterwards.
Copy one of the folders and rename it 'Background blue':

Open the copied folder, it holds two layers with effects, top shine and back.Turn off the effects for both layers:

Select your wanted color from the Color Picker:

Hold cmd (mac)/ ctrl (pc) and click in the layer symbol to select the content:

Press alt + backspace to fill the selection with your foreground color. Repeat the process for the other layer:

Turn effects back on and adjust to your likings (prepare for some experimenting with both selected color and the effects settings to get the wanted result):

When satisfied, copy the whole folder and use move tool to move it to the exact position of the other black background:

Saving the files
First of all, save your modified psd file with a new name.
Then go to 'File -> Save for Web and Devices'
The slices are already set up with the correct file names and file types, so you only have to press 'Save' in the Save for Web an Devices window:

In the next 'Save optimized As' window you can just leave the filename, but select 'All User Slices' at the Slices option at the bottom and press 'Save':

This will leave you with a 'images' folder containg the three files needed for the drop down cart:

Upload these files to your Joomla installation '-> modules -> mod_virtuemart_s5_dropdown_cart -> s5_dropdown' and refresh your browser and your done! Cheesy

Changing the colors of the template itself
This is more complex, but is basically the same as above.
Open the psd file, find what layers that needs to be changed and copy them.
The layer structure is not so easy to get an overview of, so use some time to check what layers that contains what, and maybe change the name of the layer if that helps you.
Change the color of the copied layers, and save the files.

You also need to change the background color in the outer template to match the graphics, open the template_css.css file and locate the background color for the boxes, change to the color for your design. Use the 'Eyedropper tool' to sample the hex color of your design in Photoshop (set sample size to 3 by 3 or 5 by 5 pixels to get an average color sampling).

Good luck!


Offline ativ
Free Member
Posts: 2

The template already comes in several colors - however, it is unclear how to apply the black demo color with the cement background. Is there a tutorial on that?
By default, the blue color shows up ...

Thank so much in advance,

Offline jonahh
Free Member
Posts: 23789 WWW

You need to assign the cement background via the template parameters area and then it will show up.  You have to upload to your server and then link via a URL to it.

Jump to:  

Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by
Page created in 0.018 seconds with 21 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.