In addition to Claro’s existing selection of course themes, course Administrators can create customized themes. The Theme Designer tool allows you to control the look and feel of your courses to match your organization's branding standards.
To Access the Theme Designer:
- From the Application Menu, select New > Themes (Beta).
Note: If you do not see the Theme Designer in the Application menu it is likely due to a role restriction—only Administrators have access to the Theme Designer.
Theme Designer has separate work areas (tabs) for the settings for: Application Menu, Theme Properties, Navigation Bars, Content Pages, Question Pages, and End Screens Theme Properties, Navigation Bars, Content Pages, Question Pages, and End Screens.
Application Menu: From here you can:
- Create a new theme or browse your existing themes.
- Save a theme.
- Undo all changes made to a theme.
- Dock and undock tools: The tool panel on each tab in the Designer is docked by default, however you can undock the panel by selecting Undock Tools. This allows you to move the tool panel around the Design window so you can get a full view of the sample display as you make your changes to the various fields available in your tools.
- Exit the Theme designer.
- Theme Name: Enter a meaningful name to help easily identify the new theme.
- Dimensions: Select the dimension you wish to work on, either Standard (1010x600) or Smartphone. A theme package will contain options for Standard and Smartphone in the same package. You do not need to make changes for all designs, but the defaults will be used if no changes are made.
- Navigation Bar: Choose between Top and Bottom Bar, Top Bar Only, or None. A theme package will have all options, so make sure you adjust each option and look and feel you wish to use.
- Style: Gives you the option of Dark, Medium, or Light indication lines around default elements.
Note: These lines are only visible in authoring mode, and are intended to indicate an editable element.
- Color Palettes: Use this option to select from our professionally appointed color palettes.
- Or, create your own custom color palette by setting the colors for each of the five Color fields.
- Family: Allows you to set your default font style. Multiple, similar fonts are grouped together per option (or Family) to ensure that if one style isn’t supported by a particular browser, a similar font that is supported can be substituted.
- Size: Sets the default font size for text elements.
- Color: Sets the default font color for text elements.
Note: These setting are course defaults, you can still make further adjustments to font in the Content and Question areas.
- Image: Here you can upload an image to be used on a Page’s background. To upload an image click the folder icon, and select the desired file. To remove an image, simply click the red X icon.
- Repeat: Allows you to repeat the image either: Horizontal, Vertical, Horizontal and Vertical, or None (if you do not wish to repeat the image).
- Background Color: Select the color you would like to see on the background of all your Pages.
- Background Image: Here you can upload an image (usually a company logo) to be displayed on the top navigation bar. To upload an image click the folder icon, and select the desired file. To remove an image, simply click the red X icon.
- Horizontal Position: Gives you the option to locate your image horizontally to the Left, Right, Center, or at an Exact location by inputting a percentage value.
- Vertical Position: Gives you the option to locate your image vertically to the Top, Bottom, Middle, or at an Exact location by inputting a percentage value.
Note: The maximum logo dimensions are 43 pixels high by 250 pixels wide.
Button Styles: Provides various color options for your navigation buttons.
- Background Image: Here you can upload an image to be used as the navigation bar’s background. To upload an image click the folder icon, and select the desired file. To remove an image, simply click the red X icon.
- Background Repeat: Allows you to repeat the image either: Horizontal, Vertical, Horizontal and Vertical, or None (if you do not wish to repeat the image).
- Background Color: Select the color you would like to see on the background of your navigation bar.
- Font Color: Allows you to choose the color of the font on the navigation bar.
Bottom Bar: Offers the same options as the Top Bar, but is only available if Top and Bottom Bar is selected in the Theme Properties.
Content Pages: Here you can specify Font Color and Font Size for various text elements (Title/Subtitle, Body, Header, Caption, and Footer) to be applied to Layout pages. Changes made to Body are also reflected in the Text element available from the Insert tab. You can also choose from a variety of Bullet Styles.
Note: Default font size has been set in the Theme Properties, text sizes for Content Pages are contingent on this default.
- Style: Allows you to make the text on end screen buttons Bold, Italic, or both.
- Font Size and Font Color can also be set here.
Button Background Colors: Here you can determine the button colors in the following states:
- Normal: This is how the button appears upon load when no has yet been taken on it.
- Active: This is how the button will look after it has been selected.
- Hover: This is how the button looks when you move the cursor over the button.
Text Color: Allows you to set the text colors for the following elements: Title, Module, Progress, and Summary.
Once these specifications have been set, you can then click the Save button located in the red Application Menu to complete your custom theme.
See our OS and browser differences related to font display and shape rendering article for helpful information and tips to consider when creating a new Theme.