An ICE skin(s)

Customizing an ICE skin(s)

What is an ICE skin?

The skin is a combination of an XHTML file, Cascading Style Sheets (CSS) and media which is used to set how the navigation, title, document content etc are to be arranged and styled. Using skins allows the content to be separated from the look and feel so pages can be branded accordingly.

Definitions

.skin folder: This is where the CSS and templates are located. There are 2 main locations, the root of the repository and within a package (e.g. /.skin and /packages/mypackage/.skin). If there is no skin in a package the root skin folder is used.; Example: .skin (sample skin folder)
ins class: Short for insert and along with the insertion class name is how ICE knows what to insert into the page and where, for example <h1 class=”ins title”/> is used to indicate where to insert the title.
sub class: Short for substitute, works the same as ins class expect it replaces the element entirely with the given content, for example <h1 class=”sub title”/>.
templates: In the context of skins, templates are XHTML files which ICE uses to populate a page with content. The default template is called template.xhtml and is located in the root of a skin folder. Multiple templates can be added by creating appropriately named XHTML files in the templates folder within a skin directory (e.g. .skin/templates/CD.xhtml).; Example: template.xhtml (default template)
package-root: To reference a file in the skin directory from either in a document or the template start the reference with package-root/. ICE will make the reference relative from the document being viewed, for example: <img src="package-root/.skin/ice.gif" alt="ICE" title="ICE logo"/>; NB: Do not use this convention in the CSS.

Insertion and substitution classes

Below are the main class names used with either ins or sub.

body: The main content of the document.
context-toc: Displayed when in a package the context-toc contains the links to each document and its context, for example when viewing a document the sub items are also shown.
context-link: The document or directory location of the page being viewed. If in a package it shows the navigation location path otherwise, it is the URL being viewed.
nav-buttons: Short for navigation buttons, when it a package allows the user to navigate between content.
packagetitle: When in a package eg /packages/my-package it is the name of a package set by the organizer.
page-toc: The linked table of contents for the page being viewed.
pdf-rendition-link: Displays a linked icon to the PDF version of the document.
slide-link: Displays a linked icon to the slide version of the document.
source-link: Displays a linked icon to the source file version of the document e.g. Word or Writer.
style-css: Used to added style information specific to rendering the page being viewed for example borders on a table etc.
title: The title of the document being viewed.
toc: The table of contents in a package similar to context-toc except it does not display sub documents.
toolbar: The ICE toolbar (doesn't get exported).

Template examples

Example of a template used by ICE

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <title class="ins title">Plan Template</title>

        <link class="sub css" rel="stylesheet" href="package-root/.skin/default.css"/>

        <style class="sub style-css" type="text/css">table {border-spacing: 0;empty-cells: show;}</style>

    </head>

    <body>

        <div><a name="top"/></div>

        <div class="ins toolbar"/>

        <div class="ins nav-buttons"/>

        <div class="ins context-link"/>

        <div>

            <h1 class="ins title"></h1>

            <span class="ins pdf-rendition-link" />

        </div>

        <div class="ins page-toc"/>

        <div class="ins body"/>

        <div class="footer">

            <span class="sub packagetitle">ICE</span> &#169; University of Southern Queensland

        </div>

    </body>

</html>

Example of the template applied a page

graphics1