Skip to content

Latest commit

 

History

History
99 lines (56 loc) · 5.37 KB

README.md

File metadata and controls

99 lines (56 loc) · 5.37 KB
Raw

OCHA Common Design sub theme for the ReliefWeb site

See original README for generic information about the OCHA Common Design sub theme.

Requirements

The customizations for the ReliefWeb site require the installation of the components drupal module.

Administration theme

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.

Customizations

The list below contains additions to the default common design subtheme.

SVG Icons

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.

Components

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.

Templates

The templates folder contains many template overrides to be used with the custom components.

Content pages

The templates/content folder notably contains templates for all the content entity pages in the form {entity-type}--{bundle}--full.html.twig.

Forms

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.

ReliefWeb custom module templates

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.

Preprocess hooks

The common_design_subtheme.theme file contains some additional hook implementations.

Page title

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.

Performances

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.

Original Common Design sub theme README

OCHA Common Design sub theme for Drupal 8

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.

Path of the libraries

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

Customise the logo

  • Set the logo logo: 'img/logos/logo.svg' in the common_design_subtheme.info.yml file, and in the sass/cd-header/_cd-logo.scss partial override file.
  • Adjust the grid column width in sass/cd-header/_cd-header.scss partial override file to accommodate the logo.

Customise the favicon and homescreen icons

Replace the favicon in the theme's root, and the homescreen icons in img/ with branded versions

Customise colours

  • Change colour-related variable names and values in sass/cd/_cd_variables.scss and replace in all references to in partial overrides in common_design_subtheme/sass/cd/

Other customisations

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.