Layout
Documentation > Layout
v4 ready - last modified 2013-03-07 by
The layout of each page is determined by the skin you are using. BoltWire allows you to completely modify any part of this layout easily, from right within your site. You can also download other skins, or create your own. You can insert placeholders and variables for style definitions as well as for meta information like keywords. Below you will find a quick overview of how it all works.
Every skin or theme is produced with two files:- (v4.x): code.skin.default.html and code.skin.default.css. These files are located in the folder boltwire/shared/skins/default of your installation. You can access these files with your ftp editor. The .html file cares for the main structure or skeleton of every page. The .css file adds information about colours, fonts, etc. just like a normal css stylesheet. The css of this file will be embedded in the head on your pages. You can use a linked css file too.
- (v3.x): code.skin and code.style. These files are accessible like every other page right from within your site. The skin file cares for the main structure or skeleton of every page. The style file adds information about colours, fonts etc.
Page Zones
The default skin is located in a special page called code.skin.default.html (v3.x: code.skin). If you are an admin, you can edit these files just like any other page and make changes. From v4.x on you will use an ftp or texteditor. You can read the details about how to modify a skin or install a new one, but for now you just need to know that it divides a page into certain zones. The default skin contains something like the following:
| TOP | |
| SIDE | HEADER |
| MAIN | |
| FOOTER | |
| BOTTOM | |
The top zone provides the BoltWire banner and the various site actions across the top. The menu items to your left are provided by the side zone. There is no content in the header or footer pages, in the default distribution, but the zones are there, ready for you to insert content. Finally, the bottom zone contains another set of the site actions. The actual content of the page you are viewing, of course, is inserted into the main zone.
Modifying a Zone
The content of each zone is drawn from specific pages, and they can be edited like any other page. To edit the top zone, for example, simply go to page "top" and click edit. You can do the same for the side, header, footer, and bottom zones. Modifying a zone once allows you to change every page that uses that zone simultaneously.
To simplify the process, BoltWire has a special zones action you can use that will identify all the zones on a given page, and provide view, source, and edit links to the associated pages. It will help you see instantly how a given page is constructed and make any changes you want.
Note: you can create additional zones, delete them, rename them, or position them however you want, by simply changing the skin. It might be a good idea, however, to first familiarize yourself with editing zones, before trying to edit a skin.
Zones and Hierarchies
To take full advantage of a skin's zones, it will be useful to review the concept of hierarchies. Because of BoltWire's hierarchical page structure, you can easily create headers and footers for entire groups of pages, or custom side menus for specific sections of your site. You can also accomplish many interesting effects by putting special forms, like a comment box, or a banner ad in one zone or another. Hierarchies are powerful, but it takes a bit to understand them well.
To illustrate, take a simple example: Suppose you have three content sections, each with a couple of pages, in your site. These sections are named alpha, beta, and gamma, and you wanted to give each section a custom side menu. Simply create a page called alpha.side, beta.side, and gamma.side. All pages in the alpha hierarchy (alpha, alpha.one, alpha.another.page, etc.) would use alpha.side. Beta pages would use beta.side. And gamma pages would use gamma.side. In cases where no hierarchical side page is found, BoltWire will use the default page "side".
For a more compliceated example, suppose you have the following header pages: kingdom.header, kingdom.animal.header and kingdom.animal.canine.header. When BoltWire tries to construct a page like kingdom.animal.canine.dog, it looks for the most closely related header page to fill the header zone of the page. In this case, it would use the contents of kingdom.animal.canine.header. A cat page (kingdom.animal.feline.cat) would use the kingdom.animal.header, because it is not in the canine hierarchy. A plant page, say kingdom.plant.tree.oak would use the kingdom.header hierarchy because it is not in the animal hierarchy. Of course, if a kingdom.plant.header, or kingdom.plant.tree.header page existed, it would use those instead.
As a simple example of the usefulness of hierarchies, view the source of page docs.header. It supplies the page title and breadcrumb at the top of every page in the documents hierarchy, automatically. You may want to take a little time to tinker with BoltWire's zones, until it is clear how they work.
Skins
The number, type, and position of your site's zones are defined by your skin, and its accompanying style sheet. The BoltWire support site provides a number of alternate, ready made skins you can add to your BoltWire installation. Switching between skins is a snap.
First, download the skins you like to your boltwire/farm/skins folder. If you correctly installed two skins (butterfly and inspire) your skins folder should look something like this:
| Skins Folder |
|---|
| >>boltwire >>farm >>skins >>butterfly code.skin.butterfly code.style.butterfly graphics, etc. >>inspire code.skin.inspire code.style.inspire graphics, etc. |
Once installed a skin has only to be turned on. Go to your site.config page, and add one of the skin names to the skin parameter, like: butterfly or inspire. Save the changes and then refresh the page. The new skin should show up immediately.
You can also add your own skins by creating one modeled on an existing skin, dropping them into the skins folder, and enabling them in your site config page. It's just that easy.
It's also possible to have fine-grained control over which skin is displayed on a page, such as allowing individuals to choose their own preferred skin, or giving different sections of your site completely different skins. While not complicated, it lies beyond the scope of this page.
Variables
You can use placeholders or variables to define content in your skin and your css dynamically. In v4.x you find a couple of these placeholders on the page code.settings (v3.x: code.snippets). These are examples, you can easily modify the values or add your own. In addition, you can fetch content from individual pages too. Suppose you want to present the title of each page on the top browser bar to facilitate bookmarking. Just put {title} (v3.x: $$title ) on your skin file, like <title> {title} </title> .
You can even include content blocks from another pages into your skin or css file. This gives you the main advantages that recent tools and procedures like css preprocessing offer.
Linked Stylesheets
You can use external css files. Just put one into a folder of your installation, like boltwire/shared/pub and link to it in your skin file. You can skip the BoltWire stylesheet in total and rely only on linked stylesheets. For this you will delete the <<css>> variable in your skin file (v4.x only). You will loose the advantage of using variables and including code blocks from pages into your stylesheets.
A mostly better option will be to use linked stylesheets in addition to the BoltWire stylesheet. This can be useful if you want to add a normalization stylesheet or if you rely on a lenghty css grid framework or boilerplate with a lot of style definitions that you do not want to modify on the fly. Linked stylesheets will not embedded in the head of every page like a BoltWire stylesheet.
