- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Local themes
A local theme is a platform-managed override to the colour scheme of the default Framework setup.
Design and usage
Structure
-
While a local theme can override almost any aspect of the Framework, it must adopt the base Framework structure:
- Font sizes remain the same
- Usage rules are the same
- Interaction patterns remain the same
Accessibility and screen readers
-
The custom site adopts the accessibility and screen reader guidance from the standard global rules.
In particular all colour contrasts must meet WCAG 2.1 level AA and requires a contrast ratio of at least 4.5:1 for functional images and normal text, and 3:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Non-JS requirements and considerations
- Follows standard global rules for non-JS.
Interactive examples
Local blue theme (logged in)
A static example is shown below, and a working example can be seen on the Afer blue theme page.
Code examples
Changing the logo in the standard Framework theme
Update the HTML:
<a class="o-masthead-logo__link" href="..." aria-label="...">
<img class="o-masthead-logo__image" src="./v.2023.01/documentation//mysite.abeille-assurances.fr/local/.../new-logo-image.png" decoding="async" width="..." height="..." alt="...">
</a>To override a background colour
Overrides the masthead colour
.o-masthead {
background: #1e5d88;
}
To override a primary button colour
.a-button--primary,
.t-accent-light .a-button--primary,
.t-accent-dark .t-accent-light .a-button--primary,
.t-card-accent-light .m-card .a-button--primary,
.t-accent-dark .a-button--primary,
.t-card-accent-dark .m-card .a-button--primary {
background: #1e5d88;
border-color: #1e5d88;
color: #fff;
}.a-button--primary:visited,
.t-accent-light .a-button--primary:visited,
.t-accent-dark .t-accent-light .a-button--primary:visited,
.t-card-accent-light .m-card .a-button--primary:visited,
.t-accent-dark .a-button--primary:visited,
.t-card-accent-dark .m-card .a-button--primary:visited {
color: #fff;
}.a-button--primary:hover,
.a-button--primary:focus,
.t-accent-light .a-button--primary:hover,
.t-accent-light .a-button--primary:focus,
.t-accent-dark .t-accent-light .a-button--primary:hover,
.t-accent-dark .t-accent-light .a-button--primary:focus,
.t-card-accent-light .m-card .a-button--primary:hover,
.t-card-accent-light .m-card .a-button--primary:focus,
.t-accent-dark .a-button--primary:hover,
.t-accent-dark .a-button--primary:focus,
.t-card-accent-dark .m-card .a-button--primary:hover,
.t-card-accent-dark .m-card .a-button--primary:focus {
background: #003e66;
border-color: #003e66;
color: #fff;
}.a-button--primary:active,
.t-accent-light .a-button--primary:active,
.t-accent-dark .t-accent-light .a-button--primary:active,
.t-card-accent-light .m-card .a-button--primary:active,
.t-accent-dark .a-button--primary:active,
.t-card-accent-dark .m-card .a-button--primary:active {
background-color: #003e66;
border-color: #003e66;
color: #fff;
}
To override a border colour
.o-product-roundels__tab-content {
border-top: 2px solid #328645;
}
To override an icon
.m-site-search__button {
background: transparent url('//mysite.abeille-assurances.fr/local/.../new-search-icon.svg') no-repeat center center;
}
.m-site-search__button:focus,
.m-site-search__input:focus ~ .m-site-search__button {
background-image: url('//mysite.abeille-assurances.fr/local/.../new-search-focus-icon.svg');
}
To override a heading colour
You may need to be very specific and clearly declare which headings you wish to override since heading styles are used within many components so will need to check that any changes have the desired effect.
The example override styling below will only target headings with the class of .a-heading and .o-masthead-support__heading
.o-masthead-support__heading.a-heading {
color: #1e5d88;
}
Development and test
Notes for developers
Locally themed css file locations
Themes work by overriding the default CSS with customised versions of the files which are located in a different directory. They can be linked directly from a template within the site where they are positioned after the global CSS cascade:
<link media="all" href="[ Your CSS file path ].css" rel="stylesheet" />
...
<link media="all" href="./v.2023.01/documentation//mysite.abeille-assurances.fr/local/css/core.css" rel="stylesheet" />Below is an example of the customised CSS override file used to create the local Afer blue theme example page.
Theme-specific information
To change the logo, update the CSS .o-masthead-logo to point to the new logo image. Then update the HTML and change the href link and aria details for the .o-masthead-logo__link anchor tag and update the src and alt tags for its child img.
To make changes to the colour scheme, images and icons, identify all classes where the new colours/images/icons are to be represented and duplicate these secions in your local CSS file with updated colours and paths to the new images and icons.
NOTE: Ensure any instances where class styling has changed at set break points is also captured in the new override cascade, for instance background:none; or border:0;
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Latest update:
- updated: With the change in browser support, the code required for local theming has changed, so support for multiple image formats for background images is no longer required.
- updated: With the addition of automated theming, is it now recommended that the majority of styling and colour changes are achieved using the automated theming, and that only very specific changes are made locally.