Watch this to switch on the bundled W3.CSS library and start styling blocks by typing class names into theme settings.
One checkbox, served locally
Under Libraries & Fonts the first tab is W3.CSS Library, and it holds a single control: Tick this box to load the W3.CSS library locally. Local is the operative word — the files ship inside the theme, so there is no third-party request and nothing to allow in a Content-Security-Policy. The bundled copy is W3.CSS 4.15, and it comes with an extended-classes stylesheet plus eleven optional colour palettes: camouflage, European signal, fashion, flat UI, food, iOS, Metro UI, US highway, US safety, vivid and Win8.
Leaving it off is a perfectly normal choice. Solo is the third generation of the W3CSS Theme and was rewritten so that neither jQuery nor W3.CSS is required — the theme's own layout does not depend on it.
Where the classes go
- Tick the box and save.
- Open the settings for the region you want to style.
- Type class names into its CSS Classes Only field, separated by spaces.
- Save and reload the page.
The nine families of class names
The settings form lists them all, and they are predictable once you see the pattern:
- Backgrounds:
w3-blue, andw3-hover-tealfor the hover state. - Text:
w3-text-amberandw3-hover-text-amber. - Links:
w3-link-green,w3-link-bg-green,w3-link-hover-green. - Buttons:
w3-button-indigoandw3-button-hover-indigo.
Each family covers the same palette, roughly thirty colours including the pale variants, so once you know one family you know all nine.
The field is deliberately described as being for a trusted user — it accepts class names, not CSS. If you need actual declarations, use the CSS Injector instead. Solo supports ^10.1 || ^11 || ^12; see the Solo theme page.
Prefer a sub-theme configured properly the first time? That is Drupal theming — or get in touch and describe the site.
