Styling your lessons

Available devices

Valamis lessons can be viewed on various devices with different screen dimensions. If you want your leaners to use mobile devices, make sure that your content looks good on every screen size.

Open the settings, and choose Set devices. There are four types available: Mobile, Tablet, Desktop(5:4), and Widescreen.

Enable the ones you want and go back to composing your lesson.

In the upper-right corner, you can select the device and edit the content based on that device.

The changes to element position and size do not carry over to other device view, so feel free to adjust them however you feel. 

Style editor and Themes

Style editor can be opened by clicking on the Brush button.

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.

The right sidebar provides the tools to change the styles of the chosen element.

Background images previously used 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. All style changes apply to all enabled devices for that lesson.

Extended CSS

You can also use additional CSS for styling the parts not covered by the Style editor.

Click the Extended CSS button in the Style editor and add the CSS properties in the field.

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.