Customizing ICE

What is an ICE skin?
- Definitions
- Insertion and substitution classes
Template examples

Customization of ICE mainly occurs in the skin folder.

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 are to be arranged and styled. Using the skin 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/mypackages/skin). If there is no skin in a package the root skin folder is used.; Example: skin (sample skin folder)
ins class: ins is short for insert and along with the insertion class name, ICE knows what to insert into the page and where.; For example <h1 class=”ins title”/> indicates 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: 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. In a package, it shows the navigation location path otherwise, it is the URL being viewed.
nav-buttons: Short for navigation buttons, when a package allows the user to navigate between content.
packagetitle: 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 add style information specific to rendering the page being viewed. For example borders on a table.
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.

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; Company Name</div>
    </body>
</html>