Library Themes

The styling options vary depending on the core framework, e.g. Tailwind or Bootstrap. Typically Tailwind offers better global styling control given it's focus on utility classes.

Control the look and feel of your Studio Templates and Pages using the built-in Colour/Font variables as well as the ability to edit the code that's applied before any Page or Template level code.

The Tailwind Variables tab lets you override and define specific Tailwind Variables (this is only relevant when using Tailwind as your framework). This allows you to add further variables that aren’t available yet in the colours / fonts UI. Both will be combined in the Tailwind @theme part of the config.

The Custom CSS tab allows you to define any specific CSS to override the core framework (Tailwind, Bootstrap etc). We strongly recommend robust CSS which starts by setting default styles for any typography element: headings, lists, blockquote etc. and also styling common elements like cards. This helps to allow a theme to be switched and for it to make a meaningful difference to how sections look.

The Head and Scripts tabs allow you to add HTML to the head and closing body areas of all Pages and Templates that use that Theme.

Colour Variants allow you to give the same section a slightly different look from an adjacent section on the page. Generally the advice when setting them up is to switch around existing variables e.g. switching the primary and secondary colours - but only with CSS scoped within a section with a variant class set. But creative library creators may find other ways to make colour variants work.