Theme Settings Configurations
This page lists configurations available for Themes websites. They are configured through the Theme Settings application or can be set as properties directly in the blocks.json file. To view the changes in the application configurations from v1 to v2, see Site properties on Themes Settings.
Brand Settings
These settings apply to features across the website, and allow Themes administrators to control the look-and-feel to suit their brand.
Display name (Theme Settings UI) | Property name (blocks.json) | Data type | Description |
|---|---|---|---|
Website Display Name | websiteName | string | The reader-friendly name of this website, to be used in meta tags and social links. Example: websiteName: The Daily Planet |
Website Domain Name | websiteDomain | URL | URL for the base domain for this site. Should NOT have a trailing slash. Example: websiteDomain: https://www.dailyplanet.com |
Primary Font (removed from Theme Settings app in Themes 2.0) For guidance on setting fonts in v2, see Local development process for Custom Blocks. | primary-font-family | string | Font family for the primary font of the website, as shown in Theme website design specs. This should be the primary branding font, and will be used on headlines. Should be in the same format as a CSS font family string. Example: primary-font-family: Arial, sans-serif |
Secondary Font (removed from Theme Settings app in Themes 2.0) For guidance on setting fonts in v2, see Local development process for Custom Blocks. | secondary-font-family | string | Font family for the secondary font of the website, as shown in Theme website design specs. This is used for body copy. Should be in the same format as a CSS font family string. Example: secondary-font-family: Georgia, serif |
Primary Color (removed from Theme Settings app in Themes 2.0) For guidance on setting colors through tokens, see Tokens. | primary-color | string | Primary accent color to use across website (on some buttons, some labels, etc.). Anything that could be used as a CSS color (hex code, rgb value, color name) is OK here. Example: primary-color: #2980B9 |
Light Logo Light Logo Alt Text (replaced with one primary logo in Themes 2.0) | primaryLogo primaryLogoAlt | URL string | Primary logo to use across website, primarily on the dark background of the navigation. Alt text to display with this logo |
Dark Logo Dark Logo Alt Text (replaced with one primary logo in Themes 2.0) | lightBackgroundLogo lightBackgroundLogoAlt | URL string | Logo to use on light background. Alt text to display with this logo |
Fallback Image | fallbackImage | URL | Image that can be used as a fallback promo image if no other promo image is set on the story. |
Copyright Text | copyrightText | string | Copyright text that appears in the footer. |
Locale | locale | string | Language that Theme website UI elements should be presented in. |
Text Direction | textDirection | string | Horizontal text direction of the site. Set to ltr (left to right) by default. Rtl is accepted to handle right to left languages. |
Text Flow | textFlow | string | Text flow of the site. The default is horizontal. The other options are for vertical text flow. NoteVertical text flow handling is not fully supported on all blocks. If you are interested in a website that handles vertical languages, contact Arc XP Customer Support. |
Date localization | dateLocalization | object | Object containing 4 values that control the appearance of display dates on the website. language: Language code for what days of the week, months, etc. should use. (For example, Wednesday in en, vs miércoles in es). Same supported set as locale. timeZone: Time zone that dates will be presented in. Must be a tz database name. (For example, America/Chicago). dateTimeFormat: Format that display dates will appear in. Uses FORMAT control characters supported by POSIX UNIX Dates. (For example, January 14, 2020 at 1:49 pm EST). dateFormat: Format for dates (as displayed in the Masthead Block). (For example, August 21, 2020). |
Social Settings
These settings apply to any features that reference an organization's social presence, like links in the footer, mentions when sharing through social, or metadata in the head of the page.
Pay close attention to whether the username or full page URL should be used for each one.
These do not have a default value, because if they are not present (if the organization doesn't have a presence on a given social platform), the associated functionality should not be added to the website.
Display name (Theme Settings UI) | Property name (blocks.json) | Data type | Description |
|---|---|---|---|
Facebook Page URL | facebookPage | URL | Facebook page for the website. It should include the full URL to the Facebook page. Example: https://www.facebook.com/washingtonpost |
Twitter Username | twitterUsername | string | Twitter username for the website. It should include anything following https://twitter.com/ for example, washingtonpost |
RSS Feed URL | rssUrl | URL | RSS page for the website. This should be an absolute URL. Example: https://www.washingtonpost.com/discussions/2018/10/12/washington-post-rss-feeds/ |
Facebook admins | facebookAdmins | string | Facebook Admins ID for this website. Used in the metadata property fb:admins |
Integration Settings
These settings are for ads and analytics integrations. If a value is present, the given script will be present on every page on the website. If a value is not present, the associated script will not be included on the website. (For this reason, they do not have a default value).
Display name (Theme Settings UI) | Property name (blocks.json) | Data type | Description |
|---|---|---|---|
Google Ads | --- | --- | --- |
DFP ID | dfpId | string | The DFP (aka Google Ads) Publisher ID for the website. |
Website Ad Path | websiteAdPath | string | Path for the given website's ad unit structure in Google Ads. Will be prepended to all ad calls on the given website. Should match the folder name(s) for each website you've set up ads for in your Google Ads account. Example value for The Globe website: the-globe Example value for The Mercury News website: mercury-news |
Advertisement Label | advertisementLabel | string | If this setting is present for a given website, then the string is used in place of the default label (ADVERTISEMENT) above ads in the Google Ad Block |
Gallery cube clicks | galleryCubeClicks | number | If this setting is present, cube ads will render in the gallery every X clicks. For example, if galleryCubeClicks is set to 5, then a reader will see a gallery cube ad every 5 clicks forward (or backward) through images in a gallery. |
Google Analytics | --- | --- | --- |
Google Tag Manager ID | gtmID | string | The Google Tag Manager ID for the website. If an ID value is present, the basic GTM script will be included on all pages on the website. |
Google Analytics ID | gaID | string | The Google Analytics ID for the website. If an ID value is present, the basic GA script will be included on all pages on the website. |
Chartbeat | |||
Chartbeat Account ID | chartBeatAccountId | string | Corresponds to _sf_async_config.uid in Chartbeat's Script. If this and chartBeatDomain are present for a given Theme website, the basic Chartbeat script will be loaded on all pages on the website. |
Chartbeat Domain | chartBeatDomain | string | Corresponds to _sf_async_config.domain in Chartbeat's script. If this and chartBeatAccountId are present for a given Theme website, the basic Chartbeat script will be loaded on all pages on the website. |
Comscore | --- | --- | --- |
Comscore ID | comscoreID | string | The Comscore ID for the website. If an ID value is present, the basic Comscore script will be added to all pages on the website. NoteComscore's Unified Digital Measurement (UDM) 2.0 is not yet supported through this setting. If your organization is interested in this integration, contact Arc XP Customer Support. |
Queryly | --- | --- | --- |
Queryly ID | querylyId | string | This is an alphanumeric ID assigned by Querlyly |
Queryly Org | querylyOrg | string | This typically the same as your Arc org ID. It is assigned by Queryly. |
Taboola | --- | --- | --- |
Taboola Publisher ID | taboolaPublisherId | string | Your Taboola Publisher ID is supplied by Taboola. See Taboola's documentation for more details: Implementing Taboola JavaScript Placement Code. |
Nativo | --- | --- | --- |
Nativo Integration | nativoIntegration | boolean | If true, then the Nativo script will be placed on all pages on the website, per the Nativo JavaScript Integration Guide. If false, then the Nativo script will not be placed on the website. |
Block Settings
These settings affect only certain Arc Blocks on your Themes website. (More general branding configurations are handled in Brand Settings).
Display name (Theme Settings UI) | Property name (blocks.json) | Data type | Description |
|---|---|---|---|
Navigation Bar Color Scheme | navColor | string | If not present, defaults to dark Can optionally be set to light |
Navigation Bar Background Color | navBarBackground | string | Can optionally be set to primary-color, in which case the website primary color is used as the background color for the navigation bar. If this value is set, the Navigation Color Scheme is still used to determine the color of the UI elements (search icon, sections button, etc.) |
Arc Settings
These settings are necessary for setup with other Arc services. Some additional Arc integrations are in the Set In The Environment File article.
Display name (Theme Settings UI) | Property name (blocks.json) | Data type | Description |
|---|---|---|---|
Resizer Domain | resizerURL | URL | URL to the Thumbor resizer for this site. Example: resizerURL: https://daily-planet.cdn.arcpublishing.com/resizer |
Non-configurable values
These settings must have the exact value specified below – they cannot be configured at this time. Changing them will break functionality on the Themes website. The Theme Settings application outputs them exactly as described below.
Display name | Property name | Data type | Description | Default value |
|---|---|---|---|---|
Aspect Ratios | aspectRatios | array | Represents an array of aspect ratio strings that will be used by our image resizer to create resized image versions. Must be in the format Number:Number. Each image that goes through the resizer will have an image version available in each of the aspect ratios specified. Must be set as the value specified in the Default value column. | [3:2, 4:3, 1:0, 16:9, 1:1] |
Breakpoints | breakpoints | object | An object representing the various breakpoints the site uses to shift layout for responsive design purposes. It's up to each component how it uses the breakpoints. The keys it expects are small, medium, and large, and the values are pixel numbers for each breakpoint. Must be set as the value specified in the Default value column. | { small: 0, medium: 768, large: 992 } |
Image widths | imageWidths | array | Must be set as the value specified in the Default value column. | [84,105,158,274,377,400,600,768,800,1024,1440,1600] |