How do I use the Claro Theme Designer Tool? – dominKnow

Themes determine the overall appearance of certain elements of a course, namely the navigation bars, default page content, and end screens. For more information on the role of themes, and a glimpse at some of the default themes Claro has to offer, click this link for a brief video tutorial: http://www.dominknow.com/tutorials.cfm.

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 Properties: This is the first step in creating your own custom theme. Here you can determine:

Settings:

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.

Colors:

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.

Font:

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.

Background:

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.

Navigation Bars: This is where you determine the appearance of the navigation bars. Here are the options available:

Logo:

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.

Top Bar:

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.

Question Pages: Like the Content Pages, here you can specify Font Color and Font Size for various text elements. In this case the text elements are as follows: Opening Text, Body Text, Option and Choices Text, and Feedback Panel.

End Screens: Here you can set the Button Style, Button Background Colors, and Text Color for the End Screens. Below is a closer look at each of these details.

Button Style:

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.

Note: An Undo button is provided under each group of settings. Clicking this button will restore default settings for the group. This is particularly useful when editing an existing theme, as the Undo button does not simply clear the fields. In this case, Undo will restore the existing theme’s original settings.

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.

Comments