Customizing the appearance of SSP pages
Updated in 8.3
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.