Here are the contents of version 0.10 (first draft) of the templating instruction file. I'm not formatting it beyond this as it's bound to change in the future.
--------------------------------------------------
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
| iWICCLE TEMPLATING REFERENCE AND INSTRUCTIONS
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
| by Markus Loponen & Keith Killilea
| (c) 2009-2010 Bridge Media Ltd.
| Revision: 2010/01/25 | Text version: 0.10
| Template version: Pro Base 1.00
| iWiccle version: 1.2x
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
| iWiccle CMS Community Builder | http://www.wiccle.com/
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
| This document and the attached "pro_base_template.psd" file may be freely copied, modified
| and distributed for purposes of iWiccle and Wiccle customization and related tutorials.
| Where substantial amounts of text are copied, this source header must be included
| to eliminate conflicting tutorials in the future as the product evolves.
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Please use this reference sheet and the attached template source file together with documentation and tutorials available at at http://www.wiccle.com/ .
Whether you produce a new template for your site, or for others to download:
* Consider submitting a screenshot to Fusion Snapshots @ http://www.wiccle.com/module/snapshots
We really want to see what you are doing with your sites, and you're welcome to have your link and a snapshot on display at Wiccle.com to bring more traffic to your iWiccle website.
QUICK CHEAT SHEET
The only thing you will need to read and understand in this file to create a new theme to Pro Base template are the 46 image names and dimensions indicated in the specifications. With the help of this reference sheet, it is theoretically possible to create a new theme straight from your image editing application without opening a single CSS or HTML file. If your design radically conflicts with default link colors and the such, you can edit them in three CSS files (see html.css, global.css, menus.css and search for "a:link" references).
GENERAL INSTRUCTIONS
The provided Photoshop template has been divided into several grouped layers for clarity. Change their visibility as needed to bring them to focus, and cut them up into the graphics indicated below.
The CSS classes are set to produce the rounded units automatically from the images. Graphics used for rounded corners etc. will need to be in the set width/height where indicated to plug directly into the system. If you generate units in different size corners, you will need to change the new image dimensions to the indicated CSS classes.
An easy way to create a rounded unit is to select the Marquee tool, set it to a fixed size, bring it over a corner, and click CTRL+ALT+C to copy it with transparency. Then CTRL+N and CTRL+V to paste it into a new image that you save. To produce the other corners, simply rotate this corner 90° three times and keep saving.
Certain areas of the site using graphics -- such as the site header and footer -- derive from the graphics you are about to produce, cutting down the time spent and the amount of new images required. As such, they have not been separately included in this base template.
While the corresponding HTML files have been note for reference, editing the CSS files is sufficient for producing a new theme. You may want to look at them in any case to get a better understanding of how everything works. While all styling for the following areas has been kept in the CSS files, some positioning CSS is used in the wrapper to allow quick and convenient relocation of all page elements from one location.
To see a case example of how a theme was done, please read "Creating new themes in iWiccle 1.20 - Task Log":
http://www.wiccle.com/forums/public_forums/install__modification/thread/creating_new_themes_in_iwiccle_120__task
TEMPLATE UNITS - CORRELATION WITH iWICCLE IMAGES
The following details the contents of the Photoshop template file and the correlation of its elements and layers with iWiccle file names and CSS classes, along with the graphics' default sizes. Rollover images should be the same size as the images they replace.
Default Pro Base template image sizes are indicated as "Width x Height" where applicable. A dash "-" indicates the width or height of an image can be changed and it still plugs into the existing structures seamlessly. Where no size is indicated, the size can be anything that fits your design. (Horizontally and vertically repeating background-images can be of any width/height in the direction of their flow.)
The final positions of the different elements of the site can be changed in skin_wrappers.php, which is a file containing a complete "wireframe" for all of your pages. You can also generate alternative wrappers and change them on a per-page basis in Wiccle Builder -> Layout.
# BACKGROUNDS
Produces the background of the site.
HTML File: skin_wrappers.php
CSS File: html.css
CSS Class: body
Images: bg.jpg
# MAIN MENU
Produces the main menu buttons.
HTML File: skin_menus.php
CSS File: menus.css
CSS Class: .top_button_left, .top_button_center, .top_button_right
Images: top_button_left.png (12x56), top_button_mid.png (-x56), top_button_right.png (12x56)
Mouseover: top_button_left_2.png, top_button_center_2.png, top_button_right_2.png
Note: The module submenu uses the top_button_mid.png graphic for a background. To create a custom background for the submenu, edit .module_menu in menu.css.
# BUTTON MENU
Produces the button/icon menu linked with member functions.
HTML File: skin_menus.php
CSS File: menus.css
CSS Class: .button_menu (currently not in use, only images used)
Images: button_home_1.png, button_members_1.png, button_mail_1.png, button_settings_1.png, button_favorites_1.png, button_search_1.png
Mouseover: button_home_2.png, button_members_2.png, button_mail_2.png, button_settings_2.png, button_favorites_2.png, button_search_2.png
# MAIN WRAPPER
HTML File: skin_wrappers.php
CSS File: wrappers.css
CSS Class: .bg_top_left, .bg_top_center, .bg_top_right, .bg_mid_left, .bg_mid_center, .bg_mid_right, .bg_bottom_left, .bg_bottom_center, .bg_bottom_right
.top_area_ajax
Images:
[Wrapper] bg_top_left.png (18x18), bg_top_center.png (-x18), bg_top_right.png (18x18),
bg_mid_left.png (5x-), bg_mid_center.png (-), bg_mid_right.png (5x-),
bg_bottom_left.png (27x27), bg_bottom_center.png (27x27), bg_bottom_right.png (27x27)
[Infobox] bg_toparea_mo.png (700x40)
Notes:
- A mid_center image is used for the central part of the main wrapper to avoid an IE bug that warps the colors of PNG images slightly, creating a slight discoloration where only a background-color is defined in CSS adjacent to PNG images of the same color. This may not be necessary in all cases (and is not used by default in the light unit boxes).
- The infobox opacity looks different in Photoshop and in a browser against a background -- it's not gray, it's opaque white as you can see by hiding the background layers.
# UNIT BOXES
Produces the standard set of iWiccle units (Rounded, Rounded Small, Square, FlatTop, FlatBase).
HTML File: skin_units.php
CSS File: units.css
CSS Classes:
[Rounded] .rounded_top_left, .rounded_top_center, .rounded_top_right,
.rounded_mid_left, .rounded_mid_center,. rounded_mid_right
.rounded_bottom_left, .rounded_bottom_center, .rounded_bottom_right
[RoundedS] .rounded_top_left_sm, .rounded_top_center_sm, .rounded_top_right_sm
[Square] .corner_top_left, .corner_top_center, .corner_top_right,
.corner_bottom_left, .corner_bottom_center, .corner_bottom_right
Images:
[Rounded] rounded_top_left.png (18x36), rounded_top_center.png (-x36), rounded_top_right.png (18x36),
rounded_mid_left.png (5x-), [optional: rounded_mid_center.png (-)], rounded_mid_right.png (5x-),
rounded_bot_left.png (17x18), rounded_bot_center.png (-x18), rounded_bot_right.png (17x18)
[RoundedS] rounded_top_left_sm.png (18x18), rounded_top_center_sm.png (-x18), rounded_top_right_sm.png (18x18)
[Square] corner_top_left.png (18x36), corner_top_center.png (-x36), corner_top_right.png (18x36),
corner_bot_left.png (17x18), corner_bot_center.png (-x18), corner_bot_right.png (17x18)
Notes:
- The small rounded graphics are nothing but vertically mirrored copies of the rounded_bot_left, rounded_bot_center and _right images.
- The left and right edges contain only the border color and the transparent area with the glow/dropshadow, and don't need to be changed between rounded and square units.
- The Flattop and Flatbase units are simply hybrids of the Rounded and Square units, defined in the CSS files, and don't require separate graphics.
- To add new units to Wiccle Builder:
1. Create a new unit box under skin_units.php and name it like the rest of the units in the file:
$skin['unit']['base']['whichever_name'] = .....
2. Include the unit tags in their right places ([[UNIT_CONTENT]], [[UNIT_CUSTOM_HEADER]]) to get the content parsed into your unit.
3. Declare it in /core/layout_grid_extensions.php anywhere in the file):
$grid['unit']['base']['whichever_name'] = "Whichever Named Box";
4. Go to "Admin CP > Home > Reboot" or add &reload=1 to your browser's address bar to reload the addition for use. (Or just close your browser and open it up again.)
AJAX POPUP WINDOW
If you want to customize the AJAX Popup Window used for diverse purposes across iWiccle, you can use the same logic as with the units´above.
HTML File: skin_ajax.php
CSS File: ajax.css
CSS Classes:
.ajax_popup_top_left, .ajax_popup_top_center, .ajax_popup_top_right,
.ajax_popup_mid_left, .ajax_popup_mid_center, .ajax_popup_mid_right
.ajax_popup_bot_left, .ajax_popup_bottom_center, .ajax_popup_bot_right
Images:
ajax_popup_lite_top_left.png (25x40), ajax_popup_lite_top_center.png (-x40), ajax_popup_lite_top_right.png (25x40),
ajax_popup_lite_mid_left.png (11x-), ajax_popup_lite_mid_mid.png (-), ajax_popup_lite_mid_right.png (11x-),
ajax_popup_lite_bot_left.png (23x25), ajax_popup_lite_bot_center.png (-x25), ajax_popup_lite_bot_right.png (23x25)
Notes: If you like the the way the popup box looks and want to use it for your content, simply copy and paste it into skin_units with a name similar to other units.
SITE FOOTER
You can change the site footer (and optionally header) wrappers by choosing any one of the unit boxes you have created. Do this in Admin CP > Site > Header & Footer.
ADDITIONAL NOTES
To answer the question in advance, we use tables and a 9-way split for creating rounded elements, and for all of you table-haters out there, here's why: In the current browser (and cross-browser) environment, we feel it's the most safe, simple and solid way to accomplish this. You are free to use CSS floats and positioning for your unit boxes and wrappers if you wish. (Godspeed and lots of love for the effort if you do -- please let us know how it's going.)
FEEDBACK AND REPORTS
If you have feedback on the contents of this file or the template creation process of iWiccle, we welcome your comments. In particular, comments seekign to further simplify and clarify the theme creation process are valued, so please send them in and let us know what'd help you get this done still faster and better.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Wiccle Headquarters: http://www.wiccle.com/
Support Forums: http://www.wiccle.com/module/forums
Fusion Central: http://www.wiccle.com/wiccle/fusion
Feedback e-mail: dev@wiccle.com
