Customizing dialog boxes for dashboard spaces

You can customize the appearance of dialog boxes in a space by adding rules to the cascading style sheet (CSS) file of your custom style.

About this task

You can customize the appearance of dialog boxes. If you modify an existing dialog box, such as Go To Spaces, Space Manager, or Create Page, all dialog boxes with the same name in your site are modified in the same way. If you use the .customStyle tag, the dialog boxes are not modified at all.

Procedure

Review the existing rules for background color and background images in the CSS file.
Modify or add rules to the CSS file of your custom style to control the style of the dialog box.

Examples

These examples show rules that control the appearance of the following dialog box that uses a simple background color and no background image.

Attention: Every CSS rule must begin with the class selector that corresponds to the name of the space style, for example "customStyle".

The following code is an example of rules for the color of the title bar on the dialog box. In this case, the dialog header will appear as a solid red color.

.customStyle .dialog_titlebar, 
.customStyle .dialog_titlebar_notitle {
	background-color: #CC0000;
	background-image: none;
	color: #FFFFFF;
}

The following code is an example of rules for the footer of the dialog boxes that contain the OK and Cancel buttons.

.customStyle .lotusDialog .lotusDialogFooter, 
.customStyle .mmDialogBottomArea, 
.customStyle .spaceDialogBottomArea, 
.customStyle .spaceDialogBottomArea .spaceDialogBottomItems {
	background-color: #CC0000;
	background-image: none;
	color: #FFFFFF;
}

The following code is an example of the rules for the close and close hover icons. You can include a close and a close hover icon in the root folder of your custom style. The icon names must match the names of your actual icons.

.customStyle .dialog_titlebar_close:hover {
	background-image: url(close_hover.png);
}

.customStyle .dialog_titlebar_close{
	background-image: url(close.png);
}

The close and close hover icons are in the upper right corner of the dialog box, as shown in the following illustration. A close hover icon is an icon that appears when the mouse is moved over the icon.