Create a LocalGov Drupal Microsite Theme

A short video demo showing how I quickly created 4 LocalGov Drupal Microsites themes.

Changing the design of subsites in Localgov Drupal

When you design a site using the UI for the LocalGov Drupal Microsites platform, all the customisations are set as CSS variables attached to the body element, like so:

<body style="--color-accent: #2F72B1; --color-accent-contrast: #ffffff; --color-accent-2: #cce6ff; --color-accent-2-contrast: #20517e; --page-background-color: #fcfcfc; --spacing: 1.5rem; --color-text: #2e2e2e; --color-link: #2F72B1; --font-secondary: 'Inter'; --heading-font-weight: 400; --font-primary: 'Inter'; --heading-2-font-weight:400; --heading-2-line-height: 1.2; --header-background-color: #2F72B1; --header-text-color: #ffffff; --header-link-color: #ffffff; --header-link-hover-color: #cce6ff; --footer-grid-column-justification: space-between;">

You can then grab those variables, and set them in your microsite theme's variables.css file. 

body {
 --color-accent: #262626;
 --color-accent-contrast: #ededed;
 --color-accent-2: #262626;
 --color-accent-2-contrast: #ddc983;
 --page-background-color: #ededed;
 --color-text: #262626;
 --color-link: #003ecc;
 --font-secondary: "Public sans";

Now, you can use that theme across all your microsites and/or override it on a per site basis - making it a perfect starting point for you site(s).

I created 4 base themes based on the demo sites we created:


Filed Under:

  1. LocalGov Drupal
  2. Drupal
  3. Drupal Planet
  4. CSS
  5. Microsites