Customizing the appearance of SSP pages

On-prem only

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/.

FOR CLOUD CUSTOMERS: Please note that homepage customization is only available for on-premises deployments. Contact our Support Team for assistance with this step.

Each theme for the Self Service Portal includes its own config.less file. You'll find these files located in the respective theme folders inside the HomePage folder:

[PhysicalPathToSSP]\HomePage\[theme name]

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;
				// Other header styles...
		

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.

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.

Each theme folder also includes a SearchBackground.jpg file. This file is used to set the background for the search pane in that theme.

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. Each theme for the Self Service Portal includes its own template. You'll find these templates located in the respective theme folders at \\System\WebAppsTemplates\SSP\HomePage\[theme name] under your Alloy Navigator installation folder.