Customizing the Appearance of SSP Pages
Updated in 8.3
The style definitions for SSP are controlled by
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:
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
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
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:
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