How to create a theme

Incentive has built in functions to help developers override the default theme.

Incentive default stylesheets

The files below are all the css files that comes with Incentive.

incentive.css - The primary stylesheet. Contains style for layout, icons, colors etc.

content.css - Styles for content in articles and blog postings.

ie6.css / ie7.css - Specific styles for internet explorer.

print.css - Specific stylesheet used when printing articles and blog postings.

reset.css - Resets all common styles.

You will find the default stylesheets in the web\theme\default folder.

Images

Images are stored in the folder web\theme\default\img.

All icons are suffixed using the pattern below:

[file name]-s.png - 16x16 pixels

[file name]-m.png - 24x24 pixels

[file name]-l.png - 32x32 pixels

[file name]-xl.png - 48x48 pixels

Create a custom theme

Create a new folder in the directory \web\theme\ and give it the name of your theme. We are going to use "bluetheme" in this example.

Create a new css file named incentive.css and save it in your theme directory. (eg. \web\theme\bluetheme\incentive.css)

IMPORTANT: The file must be named incentive.css because this is the main css file that is always added to the pages.

Make sure that you include all styles from the default theme. This is done by importing the incentive.css file from the default theme by adding the line below at the beginning of your created incentive.css file.

@import "../default/incentive.css";

This applies to all the default css files defined above in the Incentive default stylesheets section. In order to override the default content.css you will need to create a css file named content.css in your theme directory and import the content.css file from the default theme as described above.

Overriding styles from incentive.css

The reason for overriding the styles in incentive.css file compared to making your changes directly in the default incentive.css is that the default theme gets overwritten when upgrading to a new version.

In the example below we override the style for the h1 tag contained in the head container of a wiki and also change the icon displayed for articles and wikis.

[web\theme\bluetheme\incentive.css] 

@import "../default/incentive.css";
/* wiki -> head -> h1 */
.wiki #head h1 {
   color: blue;
   font-size: 200%;
}
/* icon for wiki is displayed as an background image */
.wiki #head {
   background-image: url(img/blue_article_icon-xl.png);
}

Make sure all files you are referring to are placed in your theme's img folder. In this example web\theme\bluetheme\img\blue_article_icon-xl.png.

Handling custom images not defined in incentive.css

To override the default images that are not defined in an css-file you need to create the corresponding directory structure and place your file there. Making sure that the file name is the same as the file you wish to replace.

Example.

In order to replace the icon displayed in the far left of the top navigation, the file web\theme\default\img\flower-l.png, you need to copy your replacement image to the web\theme\bluetheme\img\ folder and name it flower-l.png.

Registering and enabling the theme

Open the web.config file located in the web\ directory and locate the sectiongroup incentive. You will see a section named themes.
Insert your new theme here, specifiying:

• name - The name of the theme. The name must match the name of the folder you created in the \web\theme\ directory.
• displayname - A friendly name and/or description or the theme.
• hostname [optional] - The hostname to which this theme should be used.

The default theme is always the first theme that is defined without a hostname specified.

Example.

To register our "bluetheme" to be used when the hostname is blue.mydomain.com the entry should look like: 

<themes>
    <theme name="default" displayname="Default theme" />
    <theme name="integrated" displayname="Integrated theme (no navigation, no sidebar)" hostname="127.0.0.1" />
    <theme name="bluetheme" displayname="A blue theme" hostname="blue.mydomain.com" />
</themes>

Image and stylesheet fallback principles

When you use a custom theme, Incentive will first try to get the file from your theme. If there is no file that match it will revert to the default theme. This applies both to files and stylesheets.

This means that there is no need to redefine the styles or images you do not wish to change. But all custom css style you define that contains an image reference MUST be added to the img directory in your theme or else the file will not be displayed.

Best practice

To easier find the element to override we recommend using Internet Explorer Developer Toolbar or Firebug (Firefox).

It is good practice to click through the site when running Fiddler or a similar tool, to look for http 404-errors which would indicate that there is a problem with your theme.