House of Commons register · Subject APPG View register

General styling

Once you have created your new site, it's now time to apply the core styling to it. The theme files required to do this are as follow, with detailed documentation found below:

  • Colours: _variables_colours.scss
  • Main logo: General site settings
  • Typography: _variables_typography.scss
  • Header, body and footer colour schemes, alternate logos and general variables: _variables_general.scss
  • Social media links: _variables_social_links.scss
  • Google map styles: _variables_maps.scss

The following video takes you through the process of defining colours for your theme so you can begin to alter the aesthetics of the new site to suit your required branding. The file required to change colour schemes is found in the theme files and is called '_variables_colours.scss'.

The following video takes you through the process of defining fonts for your theme so you can begin to alter the aesthetics of the new site to suit your required branding. The file required to change typography is found in the theme files and is called '_variables_typography.scss'.

The following video takes you through the process of defining general setting for your theme, so you can begin to alter the aesthetics of the new site to suit your required branding. The file required to change the general settings is found in the theme files and is called '_variables_general.scss'.

There are two stages to adding a styled Google Map to an event page. 

Firstly, you need to generate an API Key in your Google Cloud Console. This video talks to you through that process:

Once your map is working, you can then change the colours and marker that appears on it. The following video takes you through that process.

The file required to change map colours is found in the theme files and is called '_variables_maps.scss'.