BoltWire

Welcome Tour

Layout & Design

The layout and design of each page is determined by the skin you are using. You can modify these skins (also called themes) to meet your needs, download entirely new skins, or create your own. For this, some knowledge of html and css is helpful. But here is a quick intro to how it all works:

Skins

Skins determine the overall look and layout of your site. The "default" skin is a special page called code.skin.default.html. The style sheet associated with it is called code.skin.default.css. (There is also a print and mobile skin as well). And like any other page, you can edit them right through your browser. Just be careful to not change things, if you don't know what you are doing!

You can read more about how to create or modify a skin later, but for now you just need to know that the skin divides your page into certain zones. The default skin looks something like the following:

TOP
HEADER	SIDE
MAIN
FOOTER
BOTTOM

The top zone provides the BoltWire banner and the various tabs across the top. The menu items down the side are provided by the side zone. The actual content of the page you are viewing is inserted into the main zone. Finally, the bottom zone contains a basic sitemap for your site and your copyright notice.

In the default distribution of BoltWire, there is no content in the header or footer zone, but on this page, I've formatted the course name and page title to automatically display in the header zone. You'll see that exact same header on every page in this tour. And the comment box below is part of the footer zone. By creating one footer page, I can instantly add comments to every docs page on the entire BoltWire site.

Of course, that's just one configuration. You can create additional zones, delete them, rename them, or position them however you want, by changing the skin. And there are other ways to insert dynamic code in your skin as well. Plus you can change how everything displays by changing the associated style sheet. BoltWire uses fully compliant standard html and css, so a good web designer should have no trouble modifying your site design.

Using Zones

The content of each zone is drawn from specific pages in your site, and they can be edited like any other site page. The exact page used for each zone is determined by the page group and the available zone pages.

For example: suppose you have two sections of your site, one for plants, and another for animals--and you want to give each section a custom side menu. Simply create a page called plants.side and another called animals.side. All pages in the plants hierarchy (plants, plants.trees, plants.trees.oaks, etc.) would display plants.side. Animals pages would all use animals.side.

Let's go further. Suppose you had pages like animals.cats.tigers and animals.cats.lions, I could create a custom menu for just those cat pages by creating a page called animals.cats.side. In this situation, animals.dogs.wolves would defer to the more generic animals.side menu unless animals.dogs.side existed. Or animals.dogs.wolves.side.

Basically, the closest match is used. In cases where no specific side page can be found, the default side page will be used. And the same thing happens with every zone in your skin.

The hierarchical nature of page names in BoltWire makes it super easy to customize any part of your pages any way you want. To put it differently, zones allow you to put the same bit of content in any specified location on any group of pages you want. And then by editing that single zone page, every page using that zone is instantly updated. Easy!

The flip side, however, is that to edit a specific zone on a page, you have to know which zone page is being used for that page. To assist with that, BoltWire comes with a "zone" action. Click it on any given page, and you'll see which zone pages are being used to construct that page. There are also links there to view the content of each zone page, and edit them. Just remember that when you change a zone page, it changes the display of every page in your site that uses that page to fill the zone.

There are all kinds of powerful effects you can create with zones, that makes site development surprisingly easy, we'll have to save for future tutorials. But knowing the basics of how it all works will definitely help you start tweaking the different zones on your site!

More About Skins

There's a lot more capabilities you'll want to learn about in BoltWire skins as you dig deeper into our software.

For one thing, you can insert special variables into your skin using a special format. This allows you to insert dynamic content directly into your skins html and css files. In BoltWire 7 we created a way to put custom colors and images into your skins by editing a simple skin settings page. You can even make these setting unique for each individual!

And there are special kinds of blocks you can put in your skin, ranging from a simple line of text all the way up to inserting a whole page. You can see which blocks are being inserted into your current skin by using the zones action. And in most cases you can edit the source page that fills these blocks. These blocks are designed to give you the flexibility and power you want while maintaining lightning fast page load times.

One last point worth mentioning. BoltWire is designed to be responsive. That is, when a page is viewed on a mobile device, BoltWire automatically detects that and switches to a mobile skin. And when you print a page, it switches to a nicely formatted print skin. You can edit these just as easily as the default skin--and that's a good idea, as many of your users will be on a mobile device, or printing pages!

And actually, you can install multiple skins on a site and switch between them easily. Or configure your site to use different skins on different pages. If you are a bit of a programmer, you are probably going to want to learn more about how skins work, and design a few skins of your own. It's fairly easy to grab skins from other systems, and with just a few tweaks import them into BoltWire. See our tutorial on Creating Skins for more information on how.

Next up, we're going to take a look at how member management works in BoltWire.

Member Management