Getting started
What is the difference between a skin and a template?
Scenario:
"I've just installed Nucleus and it all looks great but I'm really confused by this skin and template thing."
Explanation:
Nucleus uses a skins and templates system to control the look of Nucleus websites. The system is divided into 2 parts:
When you put a skin and its templates together, you get an entire design. Usually a skin will have more than one template that belongs with it. Let's investigate how this works with the typical blog site. A typical blog has a header section with the blog name and a picture, a navigation bar, a content section where posts are displayed and a footer section with the copyright information. Here's a rough summary:
| Site Component | Skin | Template |
|---|---|---|
| Page header with site name and logo | X | |
| Navigation bar | X | |
| Content area | Position only | X |
| Footer with copyright information | X |
Here, the section is red is controlled by the template and the blue is controlled by the skin. Where the red outlined section is located on the screen is also controlled by the skin.
Skin:
The skin controls how all the elements of the page look, including where the content area is positioned on the page. A skin has 8 different parts to it to tell Nucleus how to display different pages.
| Skin part | Function |
|---|---|
| Main Index | The home page of your Nucleus site. |
| Item Pages | Page displaying the full text of one item and its comments only. |
| Archive List | Displays a list of all your items grouped by months (default). The list formatting is controlled by a template. |
| Archive | Similar to the Main Index, but displays all the items for a given month (default). |
| Member Details | Displays information about a particular member, such as their real name, web site address, an email contact form and any other short notes the member would like to be displayed. |
| Search | Similar to the Main Index, but displays all the items returned for a search query. |
| Errors | Displays an error message when something has gone wrong. |
| Image Popups | Controls the look of the popup window for images which display in a popup window. |
Template:
Templates control how the items themselves should look. Items can usually be divided into 4 sections for easy maintenance.
- item header - usually contains the title of the post and other information about the post (date, time, author and category in our default skin example - see below)
- item body - the actual text of the post
- item footer - can contain information about the post if it was not included in the item header, may also contain the "Read more" link to the full item text
- comments area - displays all the comments made on the post and the comment form
In addition to controlling the display of items, templates also control
- how the list of archives look in the Archive List skin part;
- how the list of categories looks in the navigation bar;
- parts of the search query; and
- how dates and times are displayed (locale settings)
Further reading:
- Roel's skins and templates guide
- Skins and Templates @docs.nucleuscms.org
- The Skins and Templates forum at the Nucleus Support Forums
- Click on the little question mark icons inside your Nucleus admin area to view the help file. The help file explains a lot of skinvars and templatevars in greater depth and often gives examples of how to use them.
Why not try some experimentation on the live Nucleus demo site?
Total votes: 21 - Rating: 8.19