-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #209 from localgovdrupal/2.x
2.0.0-beta3 release
- Loading branch information
Showing
2 changed files
with
49 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,60 @@ | ||
# LocalGov Microsites Base | ||
|
||
A child theme of LocalGov Base. Please read the README there also. | ||
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 child theme of LocalGov Microsites Base | ||
## Creating a sub-theme of LocalGov Microsites Base | ||
|
||
We recommend creating a child 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. | ||
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. | ||
|
||
### Examples | ||
|
||
#### To create a base theme with your councils branding. | ||
## Quick overview | ||
|
||
1. Create a new child theme of LocalGov Microsite Base | ||
2. Define the same regions in the .info.yml | ||
3. Create (and reference in the libraries.yml) a new /css/variables.css file | ||
1. Create a new sub-theme of LocalGov Microsite Base (see below) | ||
4. Copy the variables you need from localgov_microsites_base/css/variables.css and set the default branding colours, fonts etc | ||
5. Enable this theme, using the "Enable" button only, <strong>not</strong> 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: | ||
|
||
```bash | ||
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: | ||
|
||
```css | ||
: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: | ||
|
||
- Mark Conroy https://github.com/markconroy | ||
- Maria Young https://github.com/msayoung |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters