Basic Concepts


BoltWire has several skins available in its extensions area, but it's relatively simple to create your own skin. This tutorial discusses how to do that.

To use one from the extension area, simply download the zip and extract the skin folder to boltwire/shared/skins. Then go to site.config and set skin: name.

Modify a Skin

If you can find a skin similar to what you want, its relatively simple to modify it. Just make a copy of the entire skin folder and give it a new name. The HTML page also needs to be renamed to use the new name. Edit the HTML and CSS pages, and any graphics needed. Save your changes, and your skin is ready to go.

Note: If your style sheet is included using <<css>>, it will need to be renamed as well. If it is called as an external sheet (ie: <link rel="stylesheet" href="..." />) you just need to make sure the path is correct.

Create a Skin

Suppose you want something completely different. Find a skin you like--from anywhere (like Create a folder for your new skin and place the required files in it. Rename the html file to something like Now you are ready to begin updating it:

System Variables
Insert system variables. Replace the site title with {sitename} and the slogan with {slogan}. If there is a search bar or login section, include those variables. Put the action bar somewhere. Replace colors in your CSS with system vars like accent_color, text_color, background_color, etc (update code.settings with the new colors first). Create new system variables as needed and add them to your code.settings page. See the site settings tutorial for more info.

Inline Code
Look for any inline code you want to insert. You might put ==Today is <(time %x)>== somewhere in the page. The equal signs tells BoltWire to process the enclosed text as markup. You can insert any markup you can squeeze into one line.

Fix Links
Correct any links. Use the {skin} var to point to things in your skin folder. So images there would use <img src={skin}/mygraphic.jpg>. Check the favicon link, links to style sheets or javascript files, and check the style sheet for URL's as well. If you have links in the skin to pages within your site, use the {script} variable like this: <a href={script}>Label</a>. Or change the links to inline styles (ie: ==[[|label]]==). See this page for more system variables.

Create Zones
Finally, create your zones. Replace the main body of the skin with "[[main]]" to indicate where the main page content should go. Put a header and footer zone above and below. Add a side, top or bottom zone, or any other zones that work for this skin. Be careful to not touch any container divs. Usually those are required for the style sheet to work properly.

Make these few corrections and you should be able to get your skin up and running in a matter of minutes.

Note: It's also a good idea to copy the "BOLTWIRE STYLES" section for the bottom of the default style sheet and include it in your custom style sheet. It contains several styles used by markups in BoltWire that may not work properly without them. Feel free to modify these as desired.

Share Your Skin

If you create a great skin, please zip up the folder and share it back with the BoltWire community. Email it to me (use the mailing list) and I can demo it on the BoltWire site.