1 Overview

It is possible to over ride the default CSS of bxp. By creating your own CSS sheet with the appropriate Class names you can change the look and feel of bxp.

With your CSS sheet hosted somewhere, the URL is entered into bxp at a System or User level.

1.1 For the User level

Main Menu > I Want To > Change My Details > Interface Options

In the CSS box you can put the full URL to your stylesheet.

1.2 For the System level

Main Menu > System Access Management > System Management > System Settings > Interface Options

As per the User level, simply enter the URL of the CSS to be used for all users if they have not set a custom style sheet.

2 The CSS engine

bxp runs a number of CSS sheets for managing a number of different style sets. IE limits the amount of styles per sheet to 31, so we split the sheets. Limits in IE StackOverflow article

2.1 style_master_internal.asp

The Id of the link is used to extract the custom styling for that system. If no Id is passed the system will use default styling.

body
cssBodyAll
cssBodyInner
cssMaster_Header
cssMaster_Page
cssMaster_Dashboards
cssMaster_Consoles
form
input.text, input.password, select
input.text, input.password, textarea
input[type=text]
input[type=password]
select
a
a:hover
td
textarea
.Standard_Input
.cssStandard_Input
.cssSearchBar
#body_controlbar
#iwantto_body_controlbar
.pwdChkTbl2
.pwdChkTbl3
.pwdChkTbl4
.pwdChkTd4
.pwdChkTd4 h3
.tmeTitle
.tmeHour
.tmeLinkingHeader
.tmeLinkinga
.tmeLinkinga:hover
.cssLoginTitleBox
#padding_space
#nav_controlbar
#nav_controlbar a
#nav_controlbar a:hover
#nav_controlbar li:hover a
#nav_controlbar li:hover ul li a:hover
#iwantto_nav_controlbar li:hover a
#iwantto_nav_controlbar li:hover ul li a:hover
#iwantto_ecourse_search
cssMaster_Button
cssMaster_Button:hover
cssMaster_Button:active
Master_Button
Master_Button:hover
Master_Button:active
cssControlBar_Button
cssControlBar_Button:hover
cssControlBar_Button:active
cssContentBody
cssInfoBox
Standard_Input
cssMaster_IconBar
cssMaster_IconWin8Bar
cssLatestNews_Table
cssMaster_FooterIWantToBar_Table
cssGeneric_RoundedDiv

2.2 style_master_rootobjects.css

2.3 style_master_layout.css

2.4 style_master_login.css

2.5 style_master_toolbars.css

2.6 style_master_modulespecific.css

2.7 style_master_buttons.css

2.8 style_master_password.css

2.9 style_master_keystats.css

2.10 style_menu_bars.css

2.11 style_menu_panels.css

3 Useful

In a form the text of the questions uses a class called Spoken. To override the dark red colour of Spoken, add the following line to the "Opening Instructions" of the form.

<style> .Spoken { color:#343434;  } </style>

Custom CSS

Contents