See original README for generic information about the OCHA Common Design sub theme.
The customizations for the ReliefWeb site require the installation of the components drupal module.
The ReliefWeb site uses the common design subtheme as theme for many of the administrative pages, including the entity forms, moderation backend, people page etc.
The list below contains additions to the default common design subtheme.
In addition to the common humanitarian icons used for common elements like the social media icons, the ReliefWeb uses a SVG icon sprite for specific icons like the disaster type icons.
This sprite contains all the necessary icon sizes and colors and is generated by the rw-icons component.
The icons as set via background images using css variables to chose the size, color and position.
The components folder contains a large number of additional components for the different blocks and pages on the ReliefWeb sites.
See the common_design_subtheme.libraries.yml for the associated libraries.
The templates folder contains many template overrides to be used with the custom components.
The templates/content folder notably contains templates for all the content entity pages in the form {entity-type}--{bundle}--full.html.twig.
Forms for content entities on ReliefWeb are customized to ease the editorial workflow.
The templates/form folder notably contains templates for all the content entity forms in the form {entity-type}-edit-form--{bundle}.html.twig.
The templates/rw-modules folder contains templates overrides for the templates provided by the ReliefWeb custom modules, most often to add additional classes used in the custom components.
The common_design_subtheme.theme file contains some additional hook implementations.
Some hook implementations extend the logic for the display of the page title on node pages from the common_design theme to the taxonomy_term and river pages.
A hook_page_attachments_alter implementation is used to add preconnect and preload links in the <head> for some blocking resources like the google fonts, logos and icon sprite.
A sub theme, extending common_design base theme.
This can be used as a starting point for implementations. Add components, override and extend base theme as needed. Refer to Drupal 8 Theming documentation for more.
Copy this directory to /themes/custom/ and optionally rename the folder and associated theme files from
common_design_subtheme to your theme name. Then rename the common_design_subtheme.info.yml.example to common_design_subtheme.info.yml.
If the subtheme name changes, the path of the global style sheet in common_design_subtheme.info.yml needs to reflect the new sub theme name.
libraries:
- common_design_subtheme/global-styling
- Set the logo
logo: 'img/logos/logo.svg'in thecommon_design_subtheme.info.ymlfile, and in thesass/cd-header/_cd-logo.scsspartial override file. - Adjust the grid column width in
sass/cd-header/_cd-header.scsspartial override file to accommodate the logo.
Replace the favicon in the theme's root, and the homescreen icons in img/ with branded versions
- Change colour-related variable names and values in
sass/cd/_cd_variables.scssand replace in all references to in partial overrides incommon_design_subtheme/sass/cd/
Override sass partials and extend twig templates from the base theme as needed, copying them into the sub theme and linking them using @import for sass and extend or embed for twig templates.
Add new components by defining new libraries in common_design_subtheme.libraries.yml and attaching them to relevant templates. Or use existing components from common_design.libraries.yml base theme by attaching the libraries to twig template overrides in the sub theme.
Override theme preprocess functions by copying from common_design.theme and editing as needed. For example, if new icons are added, a new icon sprite will need to be generated and the common_design_preprocess_html hook used to attach the icon sprite to the page will need a new path to reflect the sub theme's icon sprite location.
Refer to common_design README for general details about base theme and instructions for compilation. There should be no need to compile the base theme, only the sub theme.
Refer to common_design README E2E testing for information about running tests.