Skins
Documentation > Layout > Skins
v4 ready - last modified 2013-03-07 by
Skins are easy to create in BoltWire -- using regular HTML, CSS, or JavaScript pages. To create a skin, you must first understand the concept of zones.
Create a Skin
(v4.x): To make a skin, check for the default skin files in the folder boltwire/shared/skins/default. You will find two files: "code.skin.default.html" and "code.skin.default.css". Create a new folder inside the skins folder and name it after your new skin. Copy the two files to this folder. Replace "default" in the file name with the name of the new folder. Open the files with your text editor and modify them. Activate your skin on the page site.config "skin: name-of-your-skin".
(v3.x): Simply create a page with a name ending in "skin". Use the default skin as a model, or create a new one from scratch. For advanced tips on how to create a skin of your own, see Skin Creation
How Skins are Working
By default the system page code.skin.default.html (v3.x: code.skin ) is used. BoltWire however will override it with the closest local hierarchical skin it can find.
(v4.x): That is, if on page test.main, BoltWire will use the first page it finds from the following list: code.skin.test.main.html, code.skin.test.html, code.skin.html (local), and then finally code.skin.html (system). This makes it easy to customize skins for certain sections of your site -- or even specific pages.
(v3.x): That is, if on page test.main, BoltWire will use the first page it finds from the following list: code.test.main.skin, code.test.skin, code.skin (local), and then finally code.skin (system). This makes it easy to customize skins for certain sections of your site -- or even specific pages.
Zones
Next, put zones into the skin wherever you desire. The default skin for example has a top, bottom, side, header and footer zone, in addition to the main zone -- which is where the page content goes. It also has a style zone for the CSS information. You could easily add additional zones.
If you think of the web page as a floorplan with different rooms, each room is like a zone - each with it's own content. The main zone looks exactly like the others in the skin file and it certainly fills space (a zone) in the "floorplan". The only difference between the main zone and any other zone is what goes in that space. Main gets the content of the page specified in the url. The other zones get their content from pages relative hierarchically to that page.
There are three special markups you can insert into a skin page:
| [[page]] | A page zone. Use this to insert a page and process it's markup. It's useful for sidebars, headers, footers, etc. The main content of the page goes in the main zone. |
| <<code>> | A code zone. Use this to insert a code page directly into the skin -- without processing markup. It's useful for CSS and JavaScript files. |
| [markup] (v3.x: ==markup==) | A markup zone. Not actually a zone, but a place you can put markup directly into the skin and have it processed. In the default skin file this is used for [messages] (v3.x: ==messages== ). |
Both page zones and code zones are fully hierarchical. Meaning BoltWire will look for the closest pages of the specified zone type, and default to a system page if nothing else is found. (Code zones will automatically look for pages in the code pages group). Zone's should all be single word page types, like sidebar or header, all lower case and not use any special characters.
Different pages - different designs
Example 1: How to have a sidebar on all pages except of the forum pages?
The most powerful way is to use php to reset the skin variable. Let's say you want a completely different skin for your forum* hierarchy. (v3.x):- Create a code.skin.forum and a code.style.forum page. Put both in a folder named "forum" inside of boltwire/farm/skins.
- Create a page in your field/config folder called config.forum.php with the following content:
<?php
$BOLTskin = 'forum';
?>
That's all there is to it. Depending on your needs of course you can do about anything... On the BoltWire site I basically set $BOLTskin the value of {p3} for any pages in solutions.skins* by a couple lines of code in config.solutions.skins.php.
Example 2: Blog
This will help too if you want to have in a blog a different design for your homepage ("main"), for the pages with your articles or blog posts and maybe for your archive page. Just create the approbiate files.
Code Settings / Snippets
BoltWire also has a special syntax you can put into skins to retrieve default values directly from your pages (including markup) into your skin. These variables are defined in code.settings (v3.x: code.snippets ), and can be inserted into your site using the notation {variable} (v3.x: $$variable ). They can also retrieve local system or data values, and two dynamically generated values: {SkinPath} (v3.x: $$SkinPath), and {Page:} (v3.x: $$Page:) combined with some page. The first is often used for graphics in the skin, and the latter for links to pages in the wiki.
Zones Action
Using the zones action you can see the current skin being used on a page, and all the zones as well as the page being inserted into each zone. It does not list markup zones.
