Published: July 20, 2023
Create a LocalGov Drupal Microsite Theme
A short video demo showing how I quickly created 4 LocalGov Drupal Microsites themes.
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: