Help
Custom Logo and Colors Example

This example demonstrates how to customize the application styles, colors, and logo. It features uploading images and a CSS stylesheet to a domain.

You can download the source stylesheet and images from CustomStyles.zip.

The styles and logo overrides in this sample result in pages with colors and logos like this:

home page with custom colors

Create a Stylesheet
1.

Create a stylesheet file named styles.css. To change the top-right logo, create a style for the class top_right_header, and include a background style that references an image, which we'll upload in a later step. The image in this sample says "BrainHoney gradebook."

.top_right_header  
{
    width: 100%; 
    background: #EEEEEE url(Images/my_school_logo.png) no-repeat top right; 
    float: right; 
}
2.

To change the colors, create style definitions for each of the overridable styles (each of which is described and shown in Overridable Styles), using colors of your choosing. This sample uses shades of gray (#EEEEEE, #BCBCBC, etc.), blacks (#2F3134), whites, and a rust colors(#EF5025, #ED6A49).

.top_left_header  
{
    background: #EEEEEE; 
}
.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_light,
.x-menu
{
    background: #FFFFFF !important;	
}
.color_medium,
.bhSkin table
{
    background-color: #E0E0E0 !important;
}
.color_dark
{
    background-color:#BCBCBC;
}
.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 
{
    background: #ED6A49 !important;
}
.x-layout-split, .x-layout-collapsed
{
    background-color:#2F3134;
}
Upload Stylesheet and Images to the Domain

You upload styles.css and all image files to your BrainHoney domain content folder.

1.
gear image

Log into BrainHoney with a domain administrator account and click the Administrator gear icon to open the administration page.

2.
content tab

Click the Content tab to display the domain's content files.

3.
upload content dialog

Click the Upload Content button, choose the saved styles.css file and then click [OK]. Repeat for all images referenced by the stylesheet, but specify "Images" for the Upload Folder, since that is where this stylesheet references them.

If you are familiar with FTP programs, you can avoid the individual uploads and clicking by simply FTPing the files to the URL displayed in the bottom right corner of the Content tab.

Configure the Domain to use the Stylesheet

Now that the images and styles.css files are uploaded, configure your domain to use these styles.

1.
admin gear

Log into BrainHoney with a domain administrator account and click the Administrator gear icon to open the administration page.

2.
customization tab

Click the Edit button to open the Edit Domain dialog and then click the Customization tab.

3.

Locate the existing <files> element; otherwise create one. (See files for more details.) Within it, add a file element that makes the uploaded stylesheet the domain stylesheet:

<files>
<file type="style" path="styles.css"/>
</files>

Click [OK] when you are done.

4.

Log off and log back in to BrainHoney to see the newly applied styles.