Help
Overridable Styles

BrainHoney uses several CSS styles to control the look and feel of the online web client. You can specify a custom CSS stylesheet for your domain by registering a style file in the customization tag of your domain. (See the <files> tag for more information.)

You may also optionally override these styles for each course by using a course stylesheet. Specify which CSS file in the course resources for your course you want to use from the Course Settings dialog of the Syllabus page for your course. Course stylesheets may contain styles from the Application Styles section below as well as any other styles or classes that appear in your course content.

The following sections describe the list of supported, overridable styles. If you override a style that is not found in this document, you must test your style sheet with the beta or early release of the next version of the web client to make sure your styles still function correctly.

Application Styles

Application styles apply to multiple pages and components in the web client application. Overriding these styles will change the overall look and feel of the application.

StyleCSS SelectorDescription
Light Default Color.color_light, .x-menuLight, or default, shade of the default application color. This style defines the background-color property. To override all menus in the application, must also use the !important qualifier.
Medium Default Color.color_medium, .bhSkin tableMedium shade of the default application color. This style defines the background-color property. To override all rich text toolbars in the application, must also use the !important qualifier.
Dark Default Color.color_darkDark shade of the default application color. This style defines the background-color property.
Default Header.color_header, .x-toolbarDefines the style of headers or toolbars matching the default application color. This style defines the background property. To override all toolbars in the application, you must also use the !important.
Light Alternate Color.alt_color_lightLight, or default, shade of the alternate application color. This style defines the background-color property.
Medium Alternate Color.alt_color_mediumMedium shade of the alternate application color. This style defines the background-color property.
Dark Alternate Color.alt_color_darkDark shade of the alternate application color. This style defines the background-color property.
Alternate Header.alt_color_headerDefines the style of headers or toolbars matching the alternate application color. This style defines the background property.
Header Label Color.color_header,
.color_header .no_underline_link:visited,
.color_header .no_underline_link:link,
.home_header_label,
.home_header_label .no_underline_link:visited,
.home_header_label .no_underline_link:link,
.home_header_summary_label
Color to use for header labels on dashboard summary components. This sytle defines the color property and must use the !important qualifier.
Highlight Color.highlight_color, .highlight_color *, .x-tree-node .x-tree-selected, .x-grid3-row-selectedHighlight color to use for highlighting selected rows in grids, selected nodes in trees, and other current selections. This style defines the background-color property and must use the !important qualifier.
Hover Color.x-tree-node .x-tree-node-over, .x-grid3-row-over, .x-menu-item-active, .selectable:hoverHighlight color to use when the user moves the mouse over a grid row, tree node, or menu item. This style defines the background property and must use the !important qualifier.
Splitter Color.x-layout-split, .x-layout-collapsedColor to use for splitters. This usually matches the light default color style and defines the background-color property.
Default Border.default_borderDefines the default border to use around boxed UI elements. It is also used by the web client to display single-side borders between adjacent UI elements. This style defines the border property.
Rounded Box.rounded_box, .x-fieldsetDefines rounded borders to use around boxed UI elements. This style uses the CSS3 border-radius, -webkit-border-radius, and -moz-border-radius properties and has no effect in IE browsers.
Shadow.shadowDefines box shadows to use around boxed UI elements. This style uses the CSS3 box-shadow, -webkit-box-shadow, and -mox-box-shadow properties and has no effect in IE browsers.
Default Font.default_fontDefines the default font for UI elements in the application and uses the standard CSS font styles.
Page Color.page_colorColor for the background of pages. This style uses the background-color style and defaults to white.
Passing Score.passing-scoreDefines how to display passing scores. This style uses the font-weight and color properties.
Failing Score.failing-scoreDefines how to display failing scores. This style uses the font-weight and color properties.
Past Due.past-dueDefines how to display past due items. This style uses the color property.
Message Area White Space.discussion-tree-node-spaceThis allows administrators to increase white space surrounding messages to reduce crowding.
Discussion Footer.teacher-discussion-footerUsing this will hide the footer that displays student grade information from instructors.
Frame Styles

Override these styles if you want to change the branding or color scheme of the default frame instead of building a custom frame. (See User Interface Customization for details on how to build custom frames).

StyleCSS SelectorDescription
Top Left Header.top_left_headerDefines the top left image on the main application header. The element that has this style applied is absolutely positioned at the top left of the header and has a height of 49px. You may override the background and horizontal (left, right, and width) properties properties of this style, in conjunction with the top right header style to customize the top banner of the application.
Top Right Header.top_right_headerDefines the top right image on the main application header. The element that has this style applied is absolutely positioned at the top right of the header and has a height of 49px. You may override the background and horizontal (left, right, and width) properties of this style, in conjunction with the top left header style to customize the top banner of the application.
Top Header Active Button.top_header_active_buttonDefines the style of an active top-level button in the application. These buttons include the home, courses, catalog, and administration buttons. You may override any property you wish to highlight one of these top-level buttons. Usually, the background-color property will match that of the subheader color style.
Top Header Home Button.top_header_home_buttonDefines the background image of the top-level home button in the application. This style uses the background-image property.
Top Header Courses Button.top_header_courses_buttonDefines the background image of the top-level courses button in the application. This style uses the background-image property.
Top Header Catalog Button.top_header_catalog_buttonDefines the background image of the top-level catalog button in the application. This style uses the background-image property.
Top Header Administration Button.top_header_administration_buttonDefines the background image of the top-level administration button in the application. This style uses the background-image property.
Subheader Dropdown Image.sub_header_dropdownDefines the drop-down image for a top-level menu. The default image is 14x10 pixels. This style uses the background-image property and must use the !important qualifier.
Subheader Color.sub_headerBackground color of the subheader, or the menu bar. This style uses the background-color property.
Subheader Link Color.sub_header aColor of links on the main menu. This style uses the color property and must use the !important qualifier.
User Menu Link Color.sub_header_user aColor of links on the right side of the main menu, or in the user menu area. This style uses the color property and must use the !important qualifier.
Page Title Color.page_title, .page_title_separatorColor of the main page title. This style uses the color property.
Course Title Color.course_title, .course_separatorColor of the course title, or first subheader. This style uses the color property.
Section Title Color.section_titleColor of the section title, or second subheader. This style uses the color property.
Sample CSS Stylesheet
.top_left_header  
{
    background: url(Images/banner_left.gif) repeat-x top left; 
}
.top_right_header  
{
    width: 138px; 
    background: url(Images/logo.gif) no-repeat top right; 
    float: right; 
}
.top_header_active_button  
{
    background-color: #2F3134; 
    border-color: white; 
}
.sub_header
{
     background-color: #2F3134;      
}
.sub_header_dropdown {
    margin: 3px 0px 0px 4px;
    height: 10px;
    width: 16px;
    background-image: url(Images/dropdown.png) !important;
}
.sub_header a,
.sub_header_user a 
{
      color: white !important;
}
.page_title,
.page_title_separator
{
    color: #EF5126;
}
.course_title,
.course_separator
{
    color: #2F3134;
}
.section_title
{
    color: #BCBCBC;
}
.home_header_label,
.home_header_summary_label
{
    color: white !important;
}
.default_border 
{
    border:2px solid #2F3134;
}
.color_header,
.x-toolbar
{
    background: url(Images/title_bar_gray.jpg) !important;
}
.color_light,
.x-menu
{
    background: #FFFFFF !important;	
}
.color_medium,
.bhSkin table
{
    background-color: #E0E0E0 !important;
}
.color_dark
{
    background-color:#BCBCBC;
}
.alt_color_header
{
    background: url(Images/title_bar_gray.jpg);
}
.alt_color_light
{
    background-color: #E0E0E0;
}
.alt_color_medium
{
    background-color: #BCBCBC;
}
.alt_color_dark
{
    background-color: #BCBCBC;
}
.highlight_color *,
.highlight_color,
.x-tree-node .x-tree-selected,
.x-grid3-row-selected
{
    background-color: #EF5025 !important;
}
.x-tree-node .x-tree-node-over,
.x-grid3-row-over,
.x-menu-item-active,
.selectable:hover
{
    background: #ED6A49 !important;
}
.x-layout-split, .x-layout-collapsed
{
    background-color:#2F3134;
}
.discussion-forum-button
{
    display: inline-block;
    float: right;
    margin: 3px 5px 0px 5px;
    cursor: pointer;
    padding: 3px;
    background-color: #E6E7EA;
    border: 1px solid #C0C0C0;
    transition: all 0.1s ease-in;
    border-radius: 5px;
    z-index: 200;
    text-decoration: none;
}
Application Style Examples

In the examples below, we show a style sample with a representative screenshot of affected application parts; we do not attempt to show an exhaustive list of affected application pages.

.color_light, .x-menu {
  background-color:#FF0000 !important;
}

.color_medium, .bhSkin table {
  background-color:#FF0000 !important;
}

.color_header, .x-toolbar {
  background:red !important;
}

.alt_color_light {
  background-color:#FF0000;
}

.alt_color_medium {
  background-color:#FF0000;
}

.alt_color_dark {
  background-color:#FF0000;
}

.alt_color_header {
  background:red !important;
}

.color_header,
.color_header .no_underline_link:visited,
.color_header .no_underline_link:link,
.home_header_label,
.home_header_label .no_underline_link:visited,
.home_header_label .no_underline_link:link,
.home_header_summary_label {
  color:red !important;
}

.highlight_color, .highlight_color *, .x-treenode .x-tree-selected, .x-grid3-row-selected {
	color:#FFFFFF !important;
	background-color:#FF0000 !important;
}
/* This is after you've selected an item in a list the highlight that remains over the item.*/

.x-tree-node .x-tree-node-over, .x-grid3-row-over, .x-menu-item-active, .x-menu-item-active a.x-menu-item, .selectable:hover {
	background:red !important;
}
/* This is when the mouse is hovering over a selection */

.x-layout-split, .x-layout-collapsed {
  background-color:#FF0000 !important;
}

.default_border {
  border-color:red;
  border-bottom-style:solid;
  border-bottom-width:thick;
}

.default_font {
  color:red;
  font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-style:italic;
}

.page_color {
  background-color:red;
}

.passing-score {
  color:teal;
}

.failing-score {
  color:teal;
}

Frame Style Examples

In the examples below, we show a style sample with a representative screenshot of affected application parts; we do not attempt to show an exhaustive list of affected application pages.

.top_left_header {
    background: url("Images/banner_left.jpg") repeat-x scroll right top transparent;
    height: 49px;
    position: absolute;
    right: 665px;
    top: 0;
    width: 100%;
}

.top_right_header {
    background: url("Images/banner_right.jpg") repeat scroll right top transparent;
    float: right;
    height: 49px;
    position: absolute;
    right: 0;
    top: 0;
    width: 665px;
}

.top_header_active_button {
	background-color:red;
}

.top_header_home_button {
	background-image:url(Untitled-1.png);
}

.top_header_courses_button {
	background-image:url(Untitled-1.png);
}

.top_header_admin_button {
	background-image:url(Untitled-1.png);
}

.sub_header_dropdown {
	background-image:url(flag-en.gif);
}

.sub_header {
	background-color:red;
}

.sub_header a {
	color:red !important;
}

.sub_header_user a {
	color:red !important;
}

.page_title, .page_title_separator {
	color:red;
}

.course_title, .course_separator {
	color:red;
}

.section_title {
	color:red !important;
}

See Also
<files>