Style Editor

The Style editor can be opened by clicking on the Brush button at the top-right corner of the screen.

Here, you can adjust the appearance of your lessons in detail, like element colors, text fonts, and more. You will see a preview with examples for various elements and text styles, like headings and lists.

The left sidebar lists the elements that can be individually styled. Click on any element to open the preview and the tools to change its styles on the right side of the screen.

Background images can be added on each page separately or for all at once via Style Editor. A size less than 200kb is recommended. Make sure to align your image aspect ratio with that of your lesson.

Previously used backgrounds in the lesson can be quickly accessed from Available backgrounds section.

Background images can be fit on the page in the following ways: Fill, Fit, Stretch, Center, Tile.

Device previews will let you check out how your styles will look like on different devices. You can have different background settings for different devices - just enable the corresponding setting called "Use only on this device".

Themes

You will see your created themes, as well as the default ones. By clicking on them, you can preview each theme with your lesson content. If you like what you see, you can click Apply.

Once you edit the styles according to your liking, you may save them as a Theme. To do so, click Save as theme, name it, and click Save. This Theme can then be used for other lessons.

Besides user-created themes, there are several out-of-the-box themes in Valamis. To access them, go to Lesson Settings - Themes.

If you select user-created theme, with enough permissions you can not just apply it, bust also edit, change the permissions, or delete it.

You cannot change the default themes, you can only apply them to your lesson. 

Extended CSS

You can also use additional CSS for styling the parts not covered by the Style editor, or changing the looks of elements like the Hotspot.

To do this, just click the Extended CSS button at the bottom-left corner of the Style editor and add the proper CSS properties in the field, then Save your settings.

Want to provide feedback?

If you have questions or ideas for improvements, you can click the button below to send us a message. We will greatly appreciate it.