search

localgovdrupal / localgov_microsites_base

Base theme for LocalGov Microsites
0 stars 1 forks source link

readme

LocalGov Microsites Base

A sub-theme of LocalGov Base. Please read the README there also.

Customising the appearance through the UI

A Microsite Admin has the permission to set a number of css variables through the UI. These override the default variables set in /css/variables.css

Creating a sub-theme of LocalGov Microsites Base

We recommend creating a sub-theme of LocalGov Microsites Base in order to create a custom theme for one or more of your microsites. A Microsite controller is able to install and set a new theme for a microsite.

Quick overview

  1. Create a new sub-theme of LocalGov Microsite Base (see below)
  2. Copy the variables you need from localgov_microsites_base/css/variables.css and set the default branding colours, fonts etc
  3. Enable this theme, using the "Enable" button only, not the "Enable and set as default" button. After this, you can then hit the "Set as default" button. This 2-step process is needed to ensure all the blocks from the default theme get transition to the same block regions in your new theme.

Sub-theme

To create a sub-theme, you simply need to run the sub-theme creation script that is in the /scripts directory, like so:

  cd web/themes/contrib/localgov_microsites_base/
  bash scripts/create_subtheme.sh

You need to enter two items when creating a sub-theme:

  1. The name of the theme, this can be anything and can include spaces, e.g. Super Council
  2. The machine name for the theme, this must start with a letter and use only lowercase letters and underscores, e.g. super_council

Custom Styles

Hopefully most of the custom styles you will need are set via CSS custom properties in the /css/variables.css file in your sub-theme.

This is where you set your colours, fonts, spacing, etc. Then you "apply" these variables where needed, like so:

  :root {
    /* Set/Override Variables */
    --color-accent: red;
    --spacing-largest: 5rem;

    /* Apply Variables */
    --color-link: var(--color-accent);
    --breadcrumbs-background-color: var(--color-accent);
    --section-spacing-vertical-header: var(--spacing-largest);
  }

If you need to add any CSS overides, you can create custom CSS files for these and then a library/libraries to attach them to your components.

Maintainers

This project is currently maintained by: