Forum Support

Shape 5
March 29, 2024, 06:36:29 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: TUTORIAL: Changing the colors of the eTensity template  (Read 1175 times)
jingli
Jr. Member
**
Offline Offline

Posts: 66



« 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
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!

Logged
ativ
Jr. Member
**
Offline Offline

Posts: 2



« Reply #1 on: May 25, 2009, 05:20:59 AM »

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,
Silke
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #2 on: May 26, 2009, 12:11:48 PM »

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.
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
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.