CGIAR-156 demo: colour themes, background images and advanced settings
Advanced settings
This Section has the HTML anchor #advanced-demo, the extra class demo-highlight and scoped Additional CSS: extra padding and an underlined headline.
Jump to the themed grid cells or the Deep cell, both reached through their HTML anchors.
Grid Cell colour themes
A Light grid whose cells each choose their own theme. The colour stays inside the cell and the gap between columns stays clear.
Green cell
Colour Theme: Green. Text and links follow the cell theme.
Accent Soft cell
Colour Theme: Accent Soft, the CGIAR mint.
Deep cell
Colour Theme: Deep, with the anchor #deep-cell and Additional CSS for rounded corners.
Everything in this band follows its colour theme: headings, body text, links and the button above. Editors only choose the theme on the Section.
Everything in this band follows its colour theme: headings, body text, links and the button above. Editors only choose the theme on the Section.
Everything in this band follows its colour theme: headings, body text, links and the button above. Editors only choose the theme on the Section.
Everything in this band follows its colour theme: headings, body text, links and the button above. Editors only choose the theme on the Section.
Everything in this band follows its colour theme: headings, body text, links and the button above. Editors only choose the theme on the Section.
Everything in this band follows its colour theme: headings, body text, links and the button above. Editors only choose the theme on the Section.
The overlay uses the section colour, so the text and button stay readable on any photo. Parallax is skipped for visitors who reduce motion, and Firefox shows a still photo.
Overlay options are Strong, Medium, Light and None. Medium and Light show more of the photo.
Grid and Grid Cell backgrounds
A Dark grid with its own photo and parallax; its second cell has its own photo too.
Grid with a background image
Strong overlay and parallax on the Grid itself.
Grid Cell with its own photo
Medium overlay, inside the column.