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
|
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
|
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
|
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
|
Default header visibility | This can be overruled on each page if needed. |
|
global_footer_id
|
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
|
Default footer visibility | This can be overruled on each page if needed. |
Overviews
| Key | Label | Description |
|---|---|---|
|
overview_img_square_fallback
|
Fallback image (Square) | 1:1 aspect ratio |
|
overview_img_wide_fallback
|
Fallback image (Wide) | 16:9 aspect ratio |
|
overview_img_pano_fallback
|
Fallback image (Panorama) | 21:9 aspect ratio |
|
overview_img_landscape_fallback
|
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 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) | An inverted version of your logo, for display on dark backgrounds. |
|
theme_font_fallback
|
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
|
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
|
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 | 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
|
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
|
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
|
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) | An inverted version of your badge icon, for display on dark backgrounds. |
|
divider_2
|
Divider | |
|
theme_font_page
|
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
|
Page background color | This color is visible on detail pages and underneath transparent segments. |
|
logo_path
|
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
|
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
|
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
|
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
|
Default CTA background | You can always change the background in the CTA itself if you want. |
Performance
| Key | Label | Description |
|---|---|---|
|
cache_buster
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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. |
Navigation
| 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
|
Sidebar visibility | When active on mobile, the sidebar will be displayed below the content area. |
|
toolbar_visibility_default
|
Default toolbar visibility | This can be overruled on each page if needed. |
|
submenu_childcount
|
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
|
Sidebar position | Choose on which side of the content the sidebar should be placed. |
|
navbar_sticky
|
Sticky navbar | |
|
navbar_size
|
Main menu size | This determines the size of the buttons and applies to both top and vertical navigation. |
|
navbar_level
|
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
|
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
|
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
|
Submenu type | Styling of the submenu items. |
|
submenu_level
|
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
|
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
|
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 . |