Work with themes

Jump to section

Create a theme

Apply a theme

Share a theme

Edit a theme

Themes are generated using CSS to style and visually enhance how your content is displayed.

A theme can be:

  • Applied to your content
  • Fully customized
  • Shared
  • Deleted
  • Edited

Create a theme

To create a new theme:

  1. Click Content Repository on the Class Homepage.

The content repository menu option is the third option of the instructor main navigation menu.

  1. Click Create New from the Content Repository main menu.

The main Create New Content Repository menu is the first menu of the Content Repository.

  1. Click Theme.

Theme is the seventh option in the Create New drop-down menu.

TIP: To create a new theme, you can also:

  1. Click Themes in your selected source pane.

Themes is the ninth option in the Current Class pane.

  1. Click Create New in the Themes pane.

Create New button is at the bottom of the Themes pane.

  1. Click Theme from the Create New menu.

After clicking on the Create New button, the Theme option in the popup menu is highlighted.

  1. Resume at step 4 of Create a theme.

 

  1. Define Theme Name in the Theme Editor.

The Theme Editor is shown, with Theme Name section followed by Theme Content section.

  1. Enter the CSS for your theme.

In the Theme Content section of the Theme Editor, a code box is highlighted.

TIP: Check out MDN Web Docs: CSS for guidance on customizing your CSS styling.

  1. Click Save & Close.

Save and Close button at the bottom of the Theme editor.

  1. Your new theme is now available in the Themes pane in the Content Repository to apply to your content.

The name of a theme is highlighted in the Themes pane of the Content Repository.

Apply a theme

Themes can be applied to the following content types:

  • Questions
  • Text
  • Interactive narratives
  • Math Apps

NOTE: Themes can't be applied to content types in bulk or entire activities. To apply a theme to a piece of content, it must be applied individually.

Themes can be applied to content using:

  • The content type's respective Editor.
  • The Activity Editor that contains the content.

NOTE: Custom CSS in the Custom CSS pane of a question will override the features of a theme. Example — Adding a font size in the Custom CSS pane of the Question Designer will override the CSS font size of a theme.

Apply a theme using the content type's respective Editor

A theme can be applied to eligible content types using the content's specific Editor:

  1. Navigate to the specific piece of content in the Content Repository that you want to apply a theme to.

The name of a question is selected from the Questions pane, and the Content Summary pane for that question appears on the right.

  1. Click Edit.

Edit button at top right of the Content Summary pane.

  1. In the content's Editor, click Theme in the Custom CSS pane.

Under Custom CSS heading in Question Designer, the Theme button is highlighted.

NOTE: The Theme button is located in the Slides pane when editing an interactive narrative; not the Custom CSS pane.

Under Slides heading in Interactive Narrative designer, the Theme button is under the list of slides.

  1. Drag the multidirectional arrow iconof the desired theme to the Applied Themes column in the Choose Theme screen.

Arrows next to each theme in the list under Available themes heading. Click and drag from right to left to move theme to under the Applied Themes heading.

NOTE: More than 1 theme can be applied. Priority is given in the order that the themes were added to the Applied Themes column.

  1. Click Apply.

In the Choose Theme dialog, the Apply button is highlighted.

  1. Use the Formatting Styles drop-down list in the Question Text pane to select an element to view with the applied theme.

In Question Text pane, the Paragraph drop-down menu is third from right on second row.

  1. The preview how the applied theme(s) affects your content is displayed. Click Save & Close if you are satisfied with the display and return to the Content Repository. Otherwise, return to step 4 and select another theme.

Save and Close button highlighted at bottom of Question Designer.

NOTE: Custom CSS in the Custom CSS pane of a question will override the features of a theme. Example — Adding a font size in the Custom CSS pane of the Question Designer will override the CSS font size of a theme.

Apply a theme using the Activity Editor that contains the content

A theme can be applied to eligible content types within an activity using the Activity Editor:

  1. Navigate to the activity in the Content Repository that contains the content that you want to apply a theme to.

An activity is selected in the Content Repository; its pane is highlighted.

  1. Click Edit.

In the Activity pane, the Edit button is the first button on the left under the activity name.

  1. Navigate to where you can edit the content within the Activity Editor.

Assignment Editor on 2: Select Questions page

NOTE: If you are applying a theme to content in a lesson, click the 1. Design tab of the Lesson Editor.

In the Lesson Editor, the 1 Design tab is the first from the left.

NOTE: If you are applying a theme to content in an assignment, click the 2. Select Questions tab of the Assignment Editor.

In the Assignment Editor, the 2 Select Questions tab is the second from the left.

  1. Click the piece of content in the Navigation pane that you want to apply a theme to.

Under the Navigation heading, the name of one question is highlighted.

  1. Click the content's edit icon.

Edit icon is highlighted

  1. Click the Custom CSS tab.

Custom CSS is the fourth button when editing content in the Activity Editor.

  1. Click Theme.

With Custom CSS selected, Theme button is at the bottom when editing content in the Activity Editor.

NOTE: The Theme button is located in the Slides pane when editing an interactive narrative; not the Custom CSS pane.

Under Slides heading in Interactive Narrative designer, the Theme button is under the list of slides.

  1. Drag the multidirectional arrow iconof the desired theme to the Applied Themes column in the Choose Theme screen.

Arrows next to each theme in the list under Available themes heading. Click and drag from right to left to move theme to under the Applied Themes heading.

NOTE: More than 1 theme can be applied. Priority is given in the order that the themes were added to the Applied Themes column.

  1. Click Apply.

In the Choose Theme dialog, the Apply button is highlighted.

  1. Click the Document tab to be able to preview how the applied theme affects the display of your content.

Document is the first button when editing content in the Activity Editor.

  1. Use the Formatting Styles drop-down list in the Document tab to select an element to view with the applied theme.

Under Document button, the Paragraph drop-down menu is third from right on second row.

  1. The preview of how the applied theme(s) affects your content is displayed. Click the save iconif you are satisfied with the display. Otherwise return to step 4 and select another theme.

Save icon is highlighted.

NOTE: Custom CSS in the Custom CSS pane of a question will override the features of a theme. Example — Adding a font size in the Custom CSS pane of the Question Designer will override the CSS font size of a theme.

  1. Click Save & Close to save your changes and return to the Content Repository.

Save and Close button is highlighted at bottom of activity editor.

Share a theme

Check out Share content for more information on sharing a theme.

Edit a theme

Check out Edit content for more information on editing a theme.

What's next?

Now you're ready for:

 

Not what you were looking for? Try these: