Modifying the Report Studio Style Sheets

The two predefined Report Studio styles are CRN (the current default) and windows. The windows folder contains styles that apply uniquely to Report Studio.

The customizable Report Studio style sheets are located in the directory c8_location/webcontent/skins/style/pat, or c8_location/webcontent/skins/style/hal, where style represents a specific style directory . The style sheets in c8_location/webcontent/skins/windows/pat and c8_location/webcontent/skins/windows/hal must not be changed. Component-specific graphics are located in the images subdirectories of these directories.

The following table describes the contents for theReport Studio style sheets.

File	Contents
style/pat/skin.css	Defines the default interface style for Report Studio, including a section that globally sets the font
style/hal/hal_style_skin.css	Defines the default interface styles for menus and toolbars
windows/pat/skin.css	Defines a style that applies the user’s chosen Microsoft Windows display settings to the Report Studio interface

Example - Change the Fonts Used in Report Studio

Suppose you want to change the default font used in the HTML interface to one that properly renders special Asian characters. Open the style/pat/skin.css file in a text editor and comment out the section that shows Tahoma as the first item in the font-family list. Select or create an entry that better meets your Unicode requirements.

@charset "UTF-8"; 
DIV.clsToolbar, 
... 
DIV.clsTabPanels 
{ 
	font-family:Tahoma, Arial, 'MS UI Gothic',
Gulim, SimSun, PMingLiU, Raghu8, 
'Arial Unicode MS', 'Andale WT', sans-serif; 
	font-size: 8pt; 
}

Example - Change the Colors Used in Report Studio Menus

Suppose you want to change the colors used in the Report Studio menus. Open c8_location/webcontent/skins/style/hal/hal_style.css style sheet in a text editor and change the code shown in bold font to your preferred colors.

DIV.clsMenubar,
DIV.clsToolbar
{
	background-color: black; 
	border-top: solid white 1px; 
	border-bottom: solid #999999 1px; 
	color: white; 
}
TD.clsMenubarItem, 
TD.clsToolbarButton 
{
	background-color: white; 
	color: black; 
}
TD.clsMenubarItem, 
TD.clsToolbarButton 
{
	background-color: white; 
	color: black; 
}

Example - Change the Report Studio Graphics

Suppose you want to remove or replace some of the graphics used in Report Studio. When replacing images, we recommend that you retain the same directory structure and file name.

The following table shows which files supply the currently used images. They are located in the c8_location/webcontent/skins/style/branding directory.

File	Contents
branding/rs_splash.gif	The splash screen image specifically used for Report Studio, which appears in a frame, with a progress bar below it
branding/rs_welcome.gif	The Welcome page banner image specifically used for Report Studio
branding/about.gif	The About box graphic
branding/banner_cogsquare.gif	The banner image
branding/progress.gif	The animated progress image