Styling your site

Styling a site means to change its visual aspects so that it matches the owner's taste and fits the site's purpose. The balance between taste and fit for purpose depends on the site's nature, mainly the target audience. A personal site has different governing rules than a commercial one. It is more close to taste than purpose.

Taste is by definition a subjective matter, but professional web design has strong scientific foundations. This is something that most site owners fail to understand. Web professionals can tell a million stories about it...

It is recommended that if you are not making your site for fun, style for your audience - not for you. If it is for business, hire a professional; they should be able to match your aesthetics to the stylistic approach your project dictates.

More than one way to skin a cat

The first step towards styling your site is to find a suitable skin, which will form the base for your artistic explorations. Zoglair ships with a fixed layout skin as its default. If you are satisfied with it, you do not need to look for an alternative. But if you are not, you can either have a custom skin created for you by a web designer, or use anyone available in our Addons section.

If you decide not to use zoglair's default skin, then you have to install the one that you found, and make it active.

Skin customization

Generally speaking, there are several customization options available, ranging from simple to not so simple. You have to understand that a complete web design is a mixture of the following fields of expertise:

Depending on what you want to achieve, not all of them may be required. For example, if you just want to use your logo (who doesn't), then that is trivial and requires none of the above.

Here is how to deal with the most common customization cases:

Change default graphics
Every zoglair domain has some predefined image ids, for common graphics such as the site's favicon, logo, page background, etc. You can view them by clicking on your toolbar (or by selecting the "Upload" entry of the Database ACP menu). This will display the grid of the Upload table. Navigate to its first entries, specifically those having ids 1-9. The second entry (id=2) is the domain logo. Skins always use this id to display a logo. You can add more logos if you like, but this one is used by default. Right-click on its row and select "Modify". This will bring up the Upload form. Click on the [...] button in the "Name" field, to select your logo. Click [Submit] to upload it.
That's it! You have just changed the logo. Reload the page to see it in action.
Use the same procedure to change any of the default graphics you want.
Change skin variables
Every skin has a set of variables that allow for global layout/style changes with the minimum of effort, such as the page width, body background, text color, etc. It is in the philosophy of zoglair's template and styling mechanism to reuse those variables as much as possible, and at the same time to keep their total as low as it can be.
You can change one or more of these variables, via a relevant Hook. You can find detailed instructions about how to do it, in the help page displayed by clicking on your toolbar.
Change existing CSS classes or create new ones
Every skin uses a set of stylesheets that are responsible for displaying various elements in a certain way. You can change that, by overriding the skin's styling rules with your own. You can also create new styles, to use in your pages.
As in the previous case, you must write a hook. Instructions are given in the same help page.
Change HTML templates
As you may recall, from the Terminology chapter, zoglair uses clips to build pages. Every clip inputs some form of raw data and outputs a formatted version of it. There are three layers involved during this process:
 What is it?Handled by?
Structurethe data itselfHTML
Presentationhow data lookCSS
Behaviourhow data interactJavascript
You've already seen how you can interfere with the presentation layer, in the two previous cases. In a similar manner, you can work with HTML templates. A template is an abstract structure with placeholders for runtime data. Just before it is filled in, you are given the chance to change it. This is the job of the zClip*::html Hook. Unfortunately, changing HTML templates is not as straightforward as changing the CSS. That is why it is discussed in the Developer Guide.
« Basics Content »
(C) Nick B. Cassos - All Rights Reserved
powered by zoglair
page generated in 48ms (11 queries, 7ms)