Creating a new color theme in iWiccle or Wiccle Web Builder is easy. Here are instructions for creating your own basic color sub-themes. Please have a look at a sample red theme to know what to expect by following this tutorial — it was created as a test case for these notes.
Inside your template folder (e.g. /templates/pro/), you have two folders called "css" and "images". Any folders prefixed "css_" and "images_" will be recognized as template sub-themes, and can be selected in Admin CP > Site > Skins / Edit, as shown below.
To create a new color theme, make copies of the default "css" and "images" folders, and name them as "css_red" and "images_red" (for example). Then change the CSS and image folders for your template in the Admin CP, as shown above.
After this, all that's left to do is changing a couple of colors in the CSS files, and replacing a couple of images. The site background image and the button menu icons can be changed simply by replacing the corresponding images (bg.jpg / button_home_1.jpg, etc.) in the image directory.
Below is a list of the CSS files you need to use, along with a list of styles and properties you need to change.
#html.css
body { background-color, background-image } -- body background
h1, h2, h3, h4, h5 { color } -- different sizes of headers
a:link, a:visited, a:active, a:hover { color } -- general links
#wrappers.css
.site_phrase { color } -- phrase in the header
.site_name h1 { color } -- site name in the header
.login_area a:link, etc. { color } -- login area at the top
#menus.css
.main_menu a:link, etc. { color } -- main menu link color
.module_menu a:link, etc. { color } -- module menu link color
.slipstream a:link, etc. { color } -- slipstream navigation bar color
The above is sufficient for creating a great deal of color variants with minimal work. Generating the new button menu graphics is what took most of the time in the process — it must have taken in the range of 20 minutes or so in total.
If you want to create subthemes using light text on dark background, there are some more changes that will need to be done; they will be documented in detail later on. For more information on modifying templates, please see the Templating Kit.
