How to change website colors

By the end of this video you can recolour any individual part of a W3CSS Theme site — header, sidebars, footer strips, the copyright bar — by typing class names into theme settings.

Twenty-six fields, one per section

Expand Advanced Site Colors - W3CSS Theme at /admin/appearance/settings/drupal8_w3css_theme and you get 26 plain text fields, one for each structural part of the page: Page Wrapper, Header, Main Menu, Welcome Text, Highlighted, Top Container Wrapper with Top First, Second and Third, Page Title, Main Container Wrapper, Breadcrumb, Sidebar First, W3CSS Content, Sidebar Second, Bottom Container Wrapper with Bottom First to Forth, Footer Container Wrapper with Footer First, Second and Third, Footer Menu and Copyright. Above the fields the theme draws a diagram of the page layout in which every name is a link that jumps straight to its own field — useful when you can see the block you want to change but not what it is called.

What to type into a field

Whatever you enter is appended to that wrapper's class attribute, so you are writing W3.CSS utilities rather than CSS: a background such as w3-blue, a text colour such as w3-text-white, a hover colour, a border, padding or margin. Several classes separated by spaces are fine. The values sit on top of the defaults the template already applies — the header is w3-theme-l4, the main menu w3-theme, the footer menu bar w3-theme-d4 and the copyright bar w3-theme-d5 — so your class wins only where it addresses the same property.

Two entries that are not colours at all

• w3-expand-fields in Page Wrapper makes multi-value fields such as tags stack at full width instead of running along one line.
• w3-animate-opacity-disabled in Page Wrapper switches off the page fade-in animation.

Work one section at a time and save between changes; with 26 fields, a mistake is far easier to find that way. Contrast is your responsibility here, so check any pairing against accessible theming practice before shipping it. The full settings list is on the W3CSS Theme project page.

If you would rather have this set up for you, Drupal theming services covers the work, and recent projects show the result.