Theme

These theming controls need to be placed within the {theme} configuration block. See Config Glossary for syntax tips.

Tip

Many of these same customizations can be applied to individual chapters. See the section on Chapters for more.

Overall theme

The theme value determines the text and background colors

value purpose default
theme Can be set to dark for a black background with white text, or light for a white background with black text. light
A dark theme A light theme

Theme color

In-Depth stories make use of an accent color to add visual interest and bring a unique and unified feel to each story. Many different elements will pick up this color, including the drop cap, scroll-progress indicator, chapter headings, link underlines, calls to action and pullquotes.

value purpose default
themeColor Defines the theme color with any valid CSS color (usually hexadecimal values). Gannett blue: #009bff
Red theme color Yellow theme color

Article background

In-Depth visual customization extends beyond theme and text colors. The background of an article can display a custom color, an image-based texture or even a floating image.

value purpose default
backgroundColor If set with a valid CSS color, the article background will be this color Light theme/white
backgroundImage If set, with a path to an image on the CDN, the image will appear underneath the article text at the top of the page and fade out as the story progresses. None
backgroundCover true will affix the backgroundImage behind the entire in-depth story false
An in-depth article with a custom background color An in-depth article with a custom background image An in-depth article with a custom background image set to cover
A custom color Custom images fade out ... ... unless set to cover

Warning

Readable text is paramount. When setting custom background colors, it is your responsibility as the producer to ensure that there is enough contrast between text and the configured backgrounds.

Dropcap

An article with a 4-graf offset dropcap

value purpose default
dropcap When set to false, the first character of the first paragraph will not be a dropcap. true
dropcapOffset When set to false, the first character of the first paragraph will not be a dropcap. true

Preview domains

Setting this will change the preview navigation to use that property's logo. For example, a story from usatoday.com could be made to look like it's on indystar.com. This is handy when editors and other collaborators might become uneccesarily nervous at the site of a different site logo. This affects preview only, not the published article.

value purpose default
domain Any valid Gannett domain, including the .com None
A story preview on usatoday.com The same preview showing indystar.com

Caution

Sometimes legacy Gatehouse sites will not display in the In-Depth editor or preview links. Setting a different domain as described above often fixes this problem. This setting will not affect the published story.