Administration Guide

Customizing the appearance of SSP pages

The style definitions for SSP are controlled by ssp.less and config.less files written in Less — a dynamic style sheet language that can be compiled into cascading style sheets (CSS). For more information on Less, see http://lesscss.org/. The files are located in the Content folder of the Self Service Portal:

[PhysicalPathToSSP]\Content\

NOTE: We recommend that you do not change the ssp.less file and use only config.less for style customizations.

To customize the appearance of your SSP pages, you need to edit the config.less file where colors are defined as variables, for example:

/*
// Main theme color
*/
@base-color: #f5f5f5; // Default theme 8
//@base-color: #d6d6d6; // Default theme 7
//@base-color: #b0b0b0; // LightGray
//@base-color: #126180; // Navi
...
@light-color: @base-color; //@light-color: lighten(@base-color, 15%);
@dark-color: desaturate(darken(@base-color, 45%), 20%);
@darker-color: desaturate(darken(@base-color, 12%), 10%);
/*
// Page header
*/
@header-background-color: @base-color;
@header-background-color2: @header-background-color;
...

The variables listed above control the base color, its light and dark variants, and the color of the page header.

When you change the base-color value, the colors of HTML elements controlled by the color theme (defined as derivatives of the base color) are updated correspondingly. The colors of the elements that are not controlled by the color theme (for example, buttons) can be customized separately.

The following types of buttons are configured in the ssp.less file:

  • Primary — stands for a primary action or primary response in a dialog form. For example: OK, Submit.

  • Secondary — optional action or choice. For example: Attach a File. Cancel — allows users cancel the action and close the dialog form. For example: Cancel, Close.

  • Cancel — allows users cancel the action and close the dialog form. For example: Cancel, Close.

Here is an example of how you can customize the color of the OK button. The button color variables are defined in config.less as follows:

/*
// Buttons
*/
@button-primary-color: #f6d996;
@button-primary-caption-color: @button-secondary-caption-color;
@button-secondary-color: #e9ebee;
@button-secondary-caption-color: #0;
@button-cancel-color: #e9ebee;
@button-cancel-caption-color: @button-secondary-caption-color;
/*

Where the button-primary-color is the color of the OK button and button-primary-caption-color is the color of its caption.

Similarly, you can customize styles for other HTML elements. For example, use the @base-font variable to customize fonts.

NOTE: Any changes in config.less file are applied immediately when you refresh the page in your web browser. You do not need to restart the IIS server and/or the Self Service Portal. You can easily revert to the original configuration by replacing your customized config.less file with the config.less.default file from the SSP template. The template is available at \\System\WebAppsTemplates\SSP\ under your Alloy Navigator installation folder.