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 of 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 all at once via Style Editor. A size of 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 the Available backgrounds section.
Background images can be fit on the page in the following ways: Fill, Fit, Stretch, Center, and Tile.
Device previews will let you check out how your styles will look 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 a user-created theme, with enough permissions, you can not just apply it but 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.