Skip to main content
pdf?stylesheet=default
Blackboard Help

Create Express Designs

You can create an Express design very easily using an existing template. This section walks you through the basics of creating an Express design.

More on the Express design common variables


Create an Express design

Steps: Express > Create a design

  1. From the Express block, select Create a Design.
  2. Select whether the Design type starts from a Template or Manual (user created) design.
  3. Configure the Template Settings:
    • Type a Backup name for the template.
    • Select from one of the Templates - style and color.

      Cherub


      Drop Shadow


      Futuristic


      Joule

      Minimal

      Simple

      Sleek

      Top Slide
       
      The Variant Preview area displays a sample of the template. The Template Notes displays the settings that need to be enabled for the template to work properly and any other information the template developer believes a user should know before selecting the template for use.
    • To copy the images from the original template to the design, select Recreate design images from the template.

      If you have upload different images through the Upload Design Image tab, clear this option.

    • Select from one of the Icon packs available.

      The designs can be used for the icons in your website, including for activities, navigation, and other icons.

      The Icon Pack Sample area displays a sample of the different styles of icons. The Icon Pack Notes displays additional information about the icons that the developer believes a user should know before selecting the pack for use.

    • If you want to switch to rounded corners rather than square edges for blocks, tabs, buttons, and sections in your courses, check Use CSS3 rounded corners.

      This CSS only works for browsers that support CSS3, such as Opera, Safari, Chrome, FF 3-4 and IE 9 (not in compatibility mode). All other browsers see square edges instead.

    • To set the opacity for editing icons in your site's blocks and courses, check Use UI Visibility CSS.

      The opacity is enforced until the users move to the icon during Editing mode. This setting is intended to make the icons on your site less intrusive to your users.

    • Set the Opacity for hidden areas level (0.0 - 1.0) for icons in the interface.

      This setting will gray out icons until the user moves to the icons.

    • Type any Custom CSS want to include in the Express design variables.

      You can override or create new CSS without having to edit the CSS file or download the design.

      To learn more about CSS changes, see Express Design Common Variables.

    • Type additional footer information in the Analytics code area.

      Add the Google or another analytic JavaScript code that is added to the footer of every page. This method allows you to add footer information without having to edit the footer.html file or download the design.

    • Type the name of the Font family to use throughout the template.
    • Type the Font size and select the extension type for the size.
  4. Configure the Custom Font Color Settings by using the Pick a color option for each font type used in your institution's website:
    • Body: The default text color of the design.
    • Header: The font or link color in the header div tags.
    • Menu: The font or link color in the Express and Flexpage menus.
    • Menu Highlight: The font or link color in the Express and Flexpage menus when a link is hovered over or currently selected.
    • Navigation/Breadcrumb: The font or link color in the navigation or breadcrumb bar.
    • Block Header: The font color at the top of a block.
    • Block Content: The font color inside a block.
    • Button: The font color of button text.
    • Gradebook Vertical: The font color when the grade book has a vertical selection.
    • Gradebook Horizontal: The font color when the grade book has a horizontal selection.
    • General Link Color: The link color throughout the site.
    • Heading (h1-h6): The h1 through h6 HTML tag font color.
    • Highlight: The font color when something is highlighted or hovered over.
    • Alternate Row: The font or link color when the alternative row background color is used.
    • Footer: The font or link color in the footer of the design.
  5. Configure the Custom Background Color Settings by using the Pick a color option for each background type used in your institution's website:
    • Body: The background color/image in the body HTML tag for the design.
    • Header: The background color/image in the header of the design.
    • Navigation/Breadcrumb: The background color/image in the navigation or breadcrumb in the design.
    • Top Bar: The background color or image behind a bar of color that is printed instead of a menu bar, if menus have not been created on the specific page. This setting may also be used for the background color or image for the menu's top menu when menus have been added.
    • Menu: The background color/image in the menu drop down for all menu items.
    • Menu Highlight: The background color/image in the menu drop down when the user hovers their mouse over a menu item.
    • Page Div: The background color/image in the div HTML tag in the ID page.
    • Content Div: The background color/image in the div HTML tag in the ID content in the design.
    • Block Header: The background color/image of the heading of all blocks. Sometimes used in templates for other heading backgrounds, such as the topic or weeks outline heading.
    • Block Content: The background color/image of the content within a block. Sometimes used in templates for other block backgrounds, such as the section area in topics or weeks courses.
    • Button: The background color/image of all buttons on the site.
    • Gradebook Vertical select: The background color/image of the vertical highlight color in the gradebook.
    • Gradebook Horizontal select: The background color/image of the horizontal highlight color in the gradebook.
    • Alternate Row: The background color/image for areas of your site that alternate colors, typically found in tables such as the gradebook, log report, and other reports.
    • Footer: The background color/image of the footer of the design.
  6. Select Save changes.

Once you have the new design created, you can upload images for the design.


Add images to your Express design

Steps: Express > Create a design > Upload design images

The Express design includes three directories for images (pix, pix_core, and pix_plugins). You can delete any of the directories, or any individual images and add your own to the design.

  1. From the Express block, select Create a Design.
  2. Select Upload Design Images.

  3. Check the folder or file you want to update.

    You can download images and folders before deleting or replacing images. You can also create a new directory.

  4. To add images to your Express design, select Upload a file.
  5. In the Upload a file page, you can move an image to the File area, or select Choose a file to search for the image file to upload.

    Only the following types of file formats can be uploaded - .flv, .gif, .ico, .jpeg, .jpg, .png, .mp3, .mp4, .swf, and .zip. If a .zip file is uploaded, it is extracted and all of the contents of the ZIP file are copied to the directory that the file was uploaded to. The ZIP is then deleted.

  6. Select Save changes when finished.