Background, colors, font

Backgrounds, colors and fonts can be edited from several places in a project. The master style is created in the project's 'Module default', from where events and modules inherit their default style. If you want to change styles for a specific module you can do so from the module settings.

For more advanced/custom styles you can embed CSS code.

In this resource:

  1. Styles in module default
  2. Styles in module settings
  3. Custom font
  4. Custom styles css

Styles in module default

Module template is where you set values that are used as the defaults for all modules. For example, if you change the background color here, you don't need to change it on any of your modules.

Styles in module settings

If you want to change styles on a specific module, you can change it in module settings on each module. You can always check the 'Inherit' box again if you want to revert to the module template.

Custom font

If you want another font than the avalable presets you can upload your own font using font-face and target it in the CSS of your project.

Upload the font under 'Files', copy the URL and refer to it in the CSS.

You can target anything with css (such as headers <h1>,< h2>,< h3> etc and paragraph text, <p>) and choose your font.

Please read more here:

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Custom styles css

You can add CSS on a global level in project settings, or on event level under event settings. You can also add css for a specific module using a code block in that module.

These three different levels affect differently. For example if you change color for <p> in a module this will only affect the <p> on that module but if you put the same CSS on project level it will affect all paragraph text in in the whole project and also every event.

If you want to learn more about CSS this is a good place to start: https://www.w3schools.com/css/