Configuration

Configuration settings are available as placeholders throughout the project. You can change them (or add new settings) under Extras > Configuration if needed.

If you're worried about these settings affecting too much of your project: don't! Many settings can be overruled on page level with a Template Variable and you can attach a setting to a context too with a different value.

Please note that for changes made under Presentation, it takes around 10-30 seconds to be reflected on the website. This is because a background process needs a little time to rebuild the styling assets.

Contact

Key Label Description
client_type
organization
Primary entity Is this a project for an individual person, or an organization? This setting decides whether to present you to the outside world as "I" or "We".
client_phone
Primary phone number
client_email
Primary email address All emails coming from the website will be sent to this address.
client_address
Primary address

Social

Key Label Description
social_linkedin
LinkedIn profile Please fill in the complete URL (including http(s)://).
social_github
hugopeek
Github username Only fill in the account name (the part after https://github.com/).
social_whatsapp_text
Whatsapp message Predefined text for the message that the visitor can send. You can use placeholders here to include some information about the referring page.
social_youtube
Youtube channel Please fill in the complete URL (including http(s)://).
social_whatsapp
WhatsApp number A mobile phone number connected to an active WhatsApp account. If entered, visitors can start a chat directly from the website. Needs to be formatted as number, without any leading zeros.
social_pinterest
Pinterest board Please fill in the complete URL (including http(s)://).
social_instagram
Instagram profile Only fill in the account name (the part after https://instagram.com/).
social_facebook
Facebook account Please fill in the complete URL (including http(s)://).
social_twitter
Twitter account Only fill in the name of the Twitter account here (so no full URL). This accountname can then be used for shares and @mentions.

Content

Key Label Description
qredits_visibility
1
Show credits in copyright footer This adds a little Romanesco badge at the bottom right corner of each footer, which opens a popup on click with additional information.
header_visibility_default
0
Default header visibility This can be overruled on each page if needed.
global_footer_id
0
Default footer This can be overridden per page, or per context (by adding a global_footer_id context setting).
qredits_text
Text in credits popup This overrides the default text retrieved from lexicon.
footer_visibility_default
1
Default footer visibility This can be overruled on each page if needed.

Overviews

Key Label Description
overview_img_square_fallback
fallback/fallback_square.png
Fallback image (Square) 1:1 aspect ratio
overview_img_wide_fallback
fallback/fallback_wide.png
Fallback image (Wide) 16:9 aspect ratio
overview_img_pano_fallback
fallback/fallback_pano.png
Fallback image (Panorama) 21:9 aspect ratio
overview_img_landscape_fallback
fallback/fallback_landscape.png
Fallback image (Landscape) 4:3 aspect ratio
overview_logo_fallback
Fallback logo For empty client logo's in testimonials / portfolio.
overview_img_portrait_fallback
fallback/fallback_portrait.png
Fallback image (Portrait) 3:4 aspect ratio
overview_icon_fallback
Fallback icon

Presentation

Key Label Description
theme_color_secondary
Secondary theme color Pick a relatively dark color, in order to maintain enough contrast with inverted (white/light) elements and text.
logo_inverted_path
logo-inverted.svg
Logo (inverted) An inverted version of your logo, for display on dark backgrounds.
theme_font_fallback
'Helvetica Neue', Arial, Helvetica, sans-serif
Fallback font Comma separated list of font(s) to use if the Google font can't be loaded (or is not defined).
header_background_default
inverted primary-color
Default header background You can always change the header background on each page later if you want.
divider_1
Divider
divider_4
Divider
theme_color_primary_light
Primary theme color (Light) A light variant of the primary color, for faintly tinted backgrounds. Make sure it has enough contrast with dark (primary) elements and text.
footer_background_default
inverted
Default footer background You can always change the footer background on each page later if you want.
theme_color_primary
Primary theme color Pick a relatively dark color, in order to maintain enough contrast with inverted (white/light) elements and text.
logo_badge_path
badge.svg
Badge Upload a square version of the logo. This will be used for the favicon and other locations where a badge icon fits in better.
divider_3
Divider
theme_border_radius
4
Border radius Average border radius (in pixels). The theme will still select a lower or higher value (relative to this setting) if that suits the context better. If set to 0, all visual elements will be square by default.
logo_target_width
238
Logo target width The desired width (in pixels) of the logo on a large desktop monitor. This probably won't turn out to be the exact width, because the size of the logo is defined in relative units, which are different per screen size. It will be close enough though.
layout_background_default
white
Default layout background Applies to ContentBlocks layouts. Useful for example if you want to have a non-white page background, in which case you'd probably use mostly transparent layouts.
logo_badge_inverted_path
badge-inverted.svg
Badge (inverted) An inverted version of your badge icon, for display on dark backgrounds.
divider_2
Divider
theme_font_page
Source Sans Pro
Page font Specify a Google webfont for all regular content. The formatting is the same as described above for the heading font. If you want to use the same font as the headings, you only need to enter the font name here. And if you leave this empty, the fallback font will be used.
theme_page_background_color
ffffff
Page background color This color is visible on detail pages and underneath transparent segments.
logo_path
logo.svg
Logo Upload a logo for your website. For the sharpest result, provide an SVG file. If that's not an option, then PNG is your best bet. JPG files are allowed, but should be avoided.
theme_color_secondary_light
Secondary theme color (Light) A light variant of the secondary color, for faintly tinted backgrounds. Make sure it has enough contrast with dark (primary) elements and text.
theme_font_size
1.28
Font size This controls the font size of regular page content. Combined with the font scale ratio setting, this will decide how big text will appear on various screens.
divider_5
Divider
theme_scale_ratio
1.333
Scale ratio This setting controls the difference in size between various elements. A low scale ratio will keep things close together, whereas a high ratio will produce bold, beefy pages. Right now, this setting is only used for scaling headings based on the current font size, but it could be applied to other settings too in the future (margins, paddings, line heights).
theme_font_header
Source+Sans+Pro:ital, [email protected], 400;0, 700;1, 400;1, 700
Heading font Specify a Google webfont for all headings on the site. You can enter just the name (i.e.: Ubuntu) or a string containing font weights too. Use the latest (v2) syntax for this: Open+Sans:ital,[email protected],400;0,700;1,400;1,700. NB: font name is case sensitive! Make sure you use the exact name as listed on Google Webfonts.
cta_background_default
inverted primary-color
Default CTA background You can always change the background in the CTA itself if you want.

Performance

Key Label Description
cache_buster
1
Cache buster When you cache static assets on server level (recommended for performance), they will be stored in the visitors' browser for a long time period (often 1 year). This means that changes to these files won't be visible in their browser on return visits, unless the filename is different. The cache buster takes care of this. When static assets like CSS or Javascript are updated, they receive a new suffix so the client browser will treat it as a new file and download it again.
img_optimize
1
Optimize images By default, the images are already thumbnailed to their appropriate size(s) by MODX, using the quality setting above. This works fine as far as image quality is concerned, but from a performance perspective, things could be better. The generated JPG and PNG thumbnails are still quite large, so they require more time to load. The solution is to use a post processor (in this case a library called Squoosh, which needs to be installed on your server), which optimizes the thumbnail to reduce file size and creates an alternative version in a modern image format (in this case WebP). This drastically reduces file size, without sacrificing image quality.
critical_shared_templates
25, 26
Shared critical templates Use a single critical CSS file for pages with these templates. Reference templates by ID and separate them with a comma.
critical_css
1
Enable critical CSS When enabled, a CSS file will be generated for each resource, containing only the styles needed to properly display content above the fold. This feature requires the 'critical' NPM package to be installed locally.
img_hidpi
1
Optimize images for HiDPI / Retina displays If set to 'yes', the responsive image function will make sure that there's always an image available at double its original resolution. This way, images and graphics will always look crisp on devices with a higher pixel ratio, but it also means longer loading times on these devices.
custom_cache
1
Custom caching By default, MODX clears the site cache very thoroughly and very often. This means that every time you save something in the manager (even something small like a fixed typo), a lot of content needs to be regenerated from the database, resulting in slower page loads. Thats why some parts of the cache have been moved to their own partition (bucket), so they won't be cleared on every save action. The only thing I did not quite figure out yet is how to tell MODX that parts of this custom cache have been updated, so you will have to inform MODX yourself. There is a button in the top menu under Magage that says "Clear Custom Cache". Pressing that ensures that all the latest changes to any custom partition are visible on the website. There is also a submenu for clearing it per partition.
max_thumb_width
2000
Maximum image width Content images will never exceed this width. Make sure it is at least as wide as the widest possible container, but also consider performance by not setting it too high.
critical_excluded_templates
Non-critical templates Don't generate critical CSS for pages with these templates. Reference templates by ID and separate them with a comma. Global templates are excluded automatically.
divider_performance_2
Divider
img_quality
65
Image quality This affects the file size of generated images, and thereby also the loading time of each page. Please note that all images in Romanesco are resized first, before being displayed in the browser. This means you don't have to worry about file sizes when uploading images in MODX. In fact, it's better to upload high quality images (1-3 MB) because the image processor gives better results if it has good source files.
minify_css_js
1
Minify CSS/JS Convenient to switch off during development, but don't forget to turn it back on once the site is live!
divider_performance_1
Divider

Feedback

Key Label Description
disqus_shortname
Disqus shortname The name of the Disqus account that will collect your comments.
commento_url
Commento URL Full URL to where Commento is hosted (incl. https://). You can run Commento on your own server, or use their hassle free cloud service by creating an account on commento.io.
comment_platform
Commenting platform of choice My personal preference is to use Commento, a free and open source discussion plugin. Commento is lightweight and privacy-focused, so no ads, third-party tracking scripts, or injected affiliate links... If you want all that, don't worry: you can still choose Disqus.

SEO

Key Label Description
google_analytics_ua
Google Analytics tracking ID This ID starts with UA-... Leave empty if you don't want to use Google Analytics. If you want to track multiple contexts with different tracking IDs, you'll have to add a google_analytics_ua setting to each context manually.
google_analytics_gtag
0
Load Google Analytics with gtag.js If enabled, the traditional Google Analytics tracking code will be replaced by the Google Tag Manager snippet (using gtag.js). Although this seems to be the recommended option now, it is by no means mandatory and the old code still works fine.
alternative_tracking_code
Alternative tracking code Use Matomo instead of Google Analytics. Matomo is free and open source, giving you full ownership of your data. You can host Matomo on your own server, or create a cloud account on matomo.org. Because the tracking code is slightly customized for each site, it's easier to just paste the full javascript snippet here.
Key Label Description
divider_navigation_1
Divider
nav_exclude_resources
Exclude resources Exclude the following resources from all menus (including overviews), regardless of their "Hide in menu" setting.
divider_navigation_2
Divider
sidebar_visibility
mobile
Sidebar visibility When active on mobile, the sidebar will be displayed below the content area.
toolbar_visibility_default
1
Default toolbar visibility This can be overruled on each page if needed.
submenu_childcount
0
Child count indicator When activated, the amount of child pages under the parent resource will be shown in a little badge inside the menu button.
sidebar_position
right
Sidebar position Choose on which side of the content the sidebar should be placed.
navbar_sticky
1
Sticky navbar
navbar_size
large
Main menu size This determines the size of the buttons and applies to both top and vertical navigation.
navbar_level
2
Main menu levels This number indicates how deep the menu will go when fetching child items. Level 1 will only show items in root folder, which means you have to make sure their subpages can be reached through Overview blocks or the submenu in BasicDetail templates.
sidebar_sticky
1
Sticky sidebar Please note: to avoid a sticky mess, this behaviour will only be applied to the last element inside the sidebar. In most cases, that's the submenu. But if you select a sidebar CTA, then that will stick instead. This option can be overriden on page level with a TV.
submenu_locality
top
Submenu locality Local navigation means that it's contextual to the user’s current location. The submenu is already restricted to pages under the same top level, but you can limit it further by only displaying child pages of the current page. There's one exception: if the current page doesn't have any children, the sibling pages within the current category will be shown.
submenu_type
secondary
Submenu type Styling of the submenu items.
submenu_level
1
Submenu level This number indicates how deep the submenu will go when fetching child items. This setting will be ignored if locality is set to only show children of current page.
divider_navigation_3
Divider

Advanced

Key Label Description
favicon_theme_color
Favicon theme color The hexadecimal value for .
mapbox_access_token
Mapbox access token
social_sharing_channels
Facebook, Twitter, LinkedIn
Social sharing channels Which social media options do you want to include in situations where content can be shared? Enter a comma-separated list and make sure all options have a chunk for rendering the button.
head_additional
Additional HEAD code Add extra HTML lines to all pages, such as additional stylesheets or extra metadata. You don't have to load any Analytics code yourself.
favicon_app_title
Romanesco
Favicon application title
footer_additional
Additional BODY code Add extra HTML lines to all pages, such as additional JS libraries. These lines will be placed just before the closing body tag. You don't have to load any Analytics code yourself.
favicon_tile_color
Favicon tile color The hexadecimal value for .