How do I know CSS style name for the design element I want to change?
If you use Firefox
If you use Internet Explorer
- Launch IE
- Press F12 to open the toolbar.
- Press Ctrl-B to select element by click.
- Click the element you want to look up.
If you use Chrome or Opera
Right click on the design element and select "Inspect element".
If you use Safari
First, enable Debug Menu to access Web Inspector. This is how you can do it on Mac: http://www.youtube.com/watch?v=VNC4Giu3mYQ This is how you can do it on Windows: http://lpetr.org/blog/archives/using-safari-web-inspector-on-windows When Debug Menu is activated, you can just right click any design element and select "Inspect element". There is a tutorial video on that: http://www.youtube.com/watch?v=rXdR5eIFZ8k
How do I target my CSS changes to some particular page or pages?
It is possible to apply some CSS rule only to some particular page in the store by changing the selector of the said rule.
How do I change the images used in UI?
You can do it by changing corresponding CSS style. For example, in order to change the bag icon in Minicart Widget, you need to:
- Make sure your new icon is available on the Web. You can upload it to your web hosting or use image hosting like Flickr.
- Find the CSS class that defines the icon. You can easily do it with Firebug, try it! If you do everything right, you'll find out that style name for the bag image is .minicart.
- Change the background URL to your image URL (from icons/minicart.png to http://yoursite.com/yourimage.png).
- Name and activate your scheme
- Save changes and hit "reload" to see the changes in your shop.
I want the same icons you use, but in a different color
Use the archive with PSD files and open them in Adobe Photoshop or GNU GIMP. You can alter any colors then save image as GIF/PNG/JPEG.
These files are © 2009 Creative Development. But you are free to alter and use them as long as you do that for purposes of customizing your store.
There are so many styles ! I want to make my custom color scheme quick, how do I pick a set of styles need changing?
There are several pre-defined CSS schemes in the store. All schemes except the basic one are made as changes to the basic. So you can use them as a shortlist of styles need changing. You can also use this 3d-party service to generate your new color theme quickly: www.ianholden.com/eshop_designer_home
Oops. I did something wrong to CSS and messed up my store. How do I revert changes?
Just activate the standard scheme. It's empty and that means it does not override the basic CSS.