Skip to main content
pdf?stylesheet=default
Blackboard Help

Set Colors

Using your school colors is an easy way to brand your website. Edline allows you to set background colors, text colors, and border colors for your web pages or sections of pages.

Blackboard recommends setting your colors using customer color themes:

  • Set the Color Theme tab in your district or school All Pages default design to set all pages in your website to the same color scheme.
  • Use the Color Theme options to create custom color names such as Overflow, Primary Background, and Header Text.
  • Once you set custom color names, select those color names whenever you choose a background or text color for sections of your website. As a result, you will get the exact shade of your school’s colors without having to enter the precise color tone again, and it makes it easier to make color changes in multiple places on your website in only one step.

How to Create Custom Color Names for Your Website

By using a custom color name (instead of the color itself), you only need to change the color in one place and it will be updated throughout the website wherever that color is used. For example, if you set Custom Color # 3 name to Accent Background and set that color to blue, when you set your footer, menu bar, and left column to use Accent Background, they will be blue. Later, you could change Accent Background to green for a springtime theme and all the sections of your website that were blue would switch to green at once.

Another advantage for district super users to create color themes, is that you could make a default design that could be used by all your schools, and the schools would only have to change the custom colors to fit their school colors and their new colors would flow throughout the website, quickly branding the design to their colors, while keeping the balance and look of the overall district design.

  1. Select Page from the Site Designer tree-view to open the Design Properties dialog.
  2. Select the Color Theme tab to view the options.

    Image illustrating associated text

    Color Theme Tab in Design Properties Dialog with Suggested Custom Color Names

  3. Set the Custom Color #1-9 by completing the following steps:
    • Type the name for the color in the Custom Color # Name box.

      The Custom Color # Name boxes in the previous picture contain the naming conventions we suggest for your custom colors.

    • Assign the color to the Custom Color # by completing one of the following steps:
      • Type the hexadecimal number of the color you want.
      • Click the ellipsis icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/ellipsis.jpg) to access the color pallet where you can select the color. Select the type of pallet from the drop-down list (options include the Edline Pallet, the Web Safe Pallet, and the Gray Scale Pallet), and then select the color square for the color.

After you have set the color names for your color theme, you should use Site Designer properties to assign each section of your website to one of the color names by clicking the drop-down arrow icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/dropdownarrow2.jpg) on the section’s Color tab to access the list of custom color names.

Image illustrating associated text

For best results for color consistency throughout the website, it is important to assign a color to either the Body or Middle Section of the page and not just to columns.

How to Set the Page Overflow Color

You can determine the color around the edge of your webpage content. The page overflow color appears when the size of the Browser window is larger than the layout of your webpage.

  1. Select Page from the Site Designer tree-view to open the Design Properties dialog.
  2. Select the Colors tab to view the options for the Page.
  3. Set the Overflow Color:
    • Blackboard recommends assigning one of your color names from your Color Theme settings by clicking the drop-down arrow icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/dropdownarrow2.jpg).
    • Type the hexadecimal number color code in the box, or click the ellipsis icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/ellipsis.jpg) to access the color pallet where you can select the color.

How to Set Text and Background Colors

You can set the colors for the text font and background in any section of the webpage. When assigning colors set the text and background colors at the highest level of the page using that color. Using that approach, the color will cascade down through each section of the page so you do not have to set it at each level. You can then set another color to a specific section or column to have that area standout.

For example, if you want most of the Body section background to be cream, but gold in the Left Column, you should only set the Body to cream. As a result, the Top, Bottom, and Middle section with all the columns and boxes will automatically be cream. You can then set the Left Column to gold. If you later want to move a box, from one section to another, the specific box will take on the color of the specific column.

When you select the Colors tab for the section, column, or box you want to set, Blackboard recommends you assign  colors to the following boxes:

  • Header Highlight Color — The Header text is the title of a particular box or folder on the page, such as News or Links. If you choose to include a header highlight (a background box for the text or an underlining rail as described in Set Additional Properties for Specific Body Sections, you can set the color for the header highlight in the Colors tab.
  • Header Text Color — The Header Text is the title of a particular box or folder on the page, such as Calendar or Contents.
  • Background Color — The Background Color is the color of the area for a section, column, or box.
  • Body Text Color — The Body Text is the font used in the body of a section, column, or box.

To set color for the Body or any sub-section, complete the following steps:

  1. From the tree-view of the Site Designer, select the section or sub-section where you want to set the colors.
  2. Select the Colors tab to view the property fields.
  3. Set the Header Highlight Color, Header Text Color, Background Color, and Body Text Color boxes:
    • Assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/dropdownarrow2.jpg).
    • Type the hexadecimal number color code in the box, or click the ellipsis icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/ellipsis.jpg) to access the color pallet where you can select the color.

How to Set Colors for the Page Header

In the Header section of the page, the background and text (font) colors are only seen on pages where the “breadcrumbs” are displayed. Breadcrumbs are hyperlink text that appears when you are not on the homepage. These hyperlinks display the path from the home page to the page you are viewing, so you can easily backtrack to a previous page.

Image illustrating associated text

  1. From the view of the Site Designer, select the Header section.
  2. Select the Colors tab to view the property boxes.
  3. Select the Background Color for the breadcrumbs by selecting the color:
    • Assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/dropdownarrow2.jpg).
    • Type the hexadecimal number color code in the box, or click the ellipsis icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/ellipsis.jpg) to access the color pallet where you can select the color.
  4. Select the color for the breadcrumb Text Color:
    • Assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/dropdownarrow2.jpg).
    • Type the hexadecimal number color code in the box, or click the ellipsis icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/ellipsis.jpg) to access the color pallet where you can select the color.
  5. Set the color to appear behind any header images from the Graphic Overflow Color box.
    This color will be seen only if the graphic header image you choose is not as wide as the page.
    • Assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon (File:en-us/Edline/040_Super_User/090_Design_Your_Edline_Website/040_Set_Design_Properties/060_Set_Colors/dropdownarrow2.jpg).
    • Type the hexadecimal number color code in the box, or click the ellipsis icon (ellipsis.jpg) to access the color pallet where you can select the color.