Personalize the Theme

How to make your course your own with custom colors, fonts, and images

Anthony Karcz avatar
Written by Anthony Karcz
Updated over a week ago

 Applies to these roles: Author, Reporter, Admin  

You can easily customize your theme in Rise by changing the photo, choosing an theme color, changing fonts, changing your cover page, adding a logo, and more. Just click Theme in the upper right corner of the course editor to access the following options.

Change the Cover Photo

A cover photo is added by default when you create the course. Courses without cover photos are automatically assigned a random image the first time they're opened.

The photo is used in various theme layouts. If you prefer not to use a cover photo in your course, that’s fine too. Select a cover page layout that doesn't include a photo and your selected theme color displays instead.

You can upload your own photo or search for the perfect image from an extensive library of gorgeous, royalty-free photographs. In the Theme menu, select Cover Page in the sidebar. Next to the photo, click Edit. From here you can upload an image or browse the Content Library for the perfect image. You can also edit the photo in the cover page settings.

From the edit menu, you can also crop the current image or adjust the overlay for your cover photo.

If it’s hard to see your title with a photo background, try adjusting the Overlay. Select a light or dark transparent overlay, then adjust its opacity as needed by percentage. Overlay adjustments affect text contrast for the image on both the cover page and sidebar navigation. For instance, if you select a dark overlay, the text color will be light and vice versa.

Pro tip: Check your navigation settings to make sure your selected overlay provides the expected contrast on the sidebar image.

Change the Theme

New courses have the Rise theme applied by default. For additional themes, click the Change Theme button. Learn more here. Changing the theme reverts any style changes you've made such as font or theme color.

Click Save in the upper left to commit your changes or Cancel to discard them. Click Back to return to the main themes menu.

Note: If you've changed your cover photo, you'll see that image previewed instead of a default image for each theme.

Modify the Cover Page and Add a Logo

Select Cover Page from the themes menu in the sidebar. Select an available cover page layout to see it with your current content in the main window.

Click Save in the upper left to commit your cover page changes or Cancel to discard them.

To add a logo, click the Add Logo button at the bottom of the sidebar to upload your image file. Once uploaded, you can change or delete the image by clicking Edit.

Reduce whitespace in your uploaded image by selecting Crop logo. In the crop image pop-up, manually crop your image or click Constrain to square to automatically apply a square crop which you can manually resize. Click Save to commit your changes. If you change your mind, open the crop image pop-up again and manually remove the crop.

You can also increase the size of the logo on the cover page by selecting an option from the Logo size drop-down list. These changes are automatically saved.

  • Small—default logo size

  • Medium—1.5x larger than the default size

  • Large—2x larger than the default size

Note: SVG and GIF files can't be cropped.

Logo changes are automatically saved. Click Back to return to the main themes menu.

Select Course Navigation and Button Style

You have three options when it comes to displaying course navigation, the sidebar menu, compact navigation, and overlay navigation.

By default, Rise courses use the sidebar menu. The compact menu is a small menu that appears as a minimized card in the bottom-left corner of your course. Overlay navigation is a large, persistent card that appears at the top of the course.

Select Navigation from the themes menu in the sidebar, then select Sidebar, Compact, or Overlay. There are several available navigation layouts. Select one to see it with your current content in the main window.

Click the Buttons tab for options to change the appearance of previous and next buttons. Select from full width:

Or floating:

You can also choose from white or dark color schemes or versions that use your selected theme color. Theme color options have a 4.5:1 color contrast ratio.

Click Save in the upper left to commit your changes or Cancel to discard them. Click Back to return to the main themes menu.

For information on the additional navigation control settings, click here.

Change the Lesson Header

Select Lesson Headers from the themes menu in the sidebar.

To disable lesson headers, toggle the Hide Lesson Headers setting to On. When turned on, the lesson count label, lesson title, and author avatar don't display at the top of each lesson. Additional lesson header options in the Theme menu are disabled.

There are several available header layouts. Select one to see it with your current content in the main window.

If you'd like to use an image as your header, select the Image style and choose an image from the Content Library or upload one of your own. Modify the existing image by clicking Edit Image to access additional menu options. Use the drop-down menu contained here to modify the image overlay color.

Once you've selected a header style, change the header height by selecting an option from the drop-down menu at the bottom of the sidebar. Lesson count labels and the author avatar can also be toggled on or off with the appropriate options.

Click Save in the upper left to commit your changes or Cancel to discard them. Click Back to return to the main themes menu.

Set the Theme Color and Adjust Contrast

Customize your content with a theme color and adjust text and graphic contrast in the Colors menu.

Theme Color

The theme color appears throughout your content to tie it all together. Choose from one of the suggested colors or create your own custom color:

  1. In the Colors menu, click Custom.

  2. Add a color by entering the hex code or manually selecting one from the color palette. Button text automatically changes from light to dark as needed to preserve a 4.5:1 contrast ratio for accessibility.

  3. Click Done to close the color selector.

Contrast

Ensure that text and graphic elements that appear over your theme color adhere to an accessibility-conformant 4.5:1 ratio by selecting Auto from the drop-down list. With this selected, the text and graphic elements that appear over your selected theme color change from light to dark as needed to preserve contrast.

Note: When you select Light or Dark, training elements won't automatically adjust and may not maintain contrast that's conformant with accessibility guidelines.

Click Save in the upper left to commit your changes or Cancel to discard them. Click Back to return to the main themes menu.

Change Fonts

In the Fonts menu, you can select and preview several recommended fonts based on your current theme.

If you'd like to mix and match heading and body fonts, click the More tab. The More tab is also where you'll add and manage your own custom fonts. Click here to learn more.

Click Save in the upper left to commit your changes or Cancel to discard them. Click Back to return to the main themes menu.

Modify Blocks

By default, non-text blocks animate smoothly into view as learners scroll through block lessons, but you can turn the animations off if you prefer. Select the Blocks menu, then toggle the Block Entrance Animations switch to Off.

Click Save in the upper left to commit your changes or Cancel to discard them. Click Back to return to the main themes menu.

Did this answer your question?