Finding 'Advanced Settings' Theme Variables
With the addition of 'Advanced Settings' to the Theme Editor, we're seeing a small influx of tickets asking about the function of certain variables or how to find certain variables. Currently, there isn't much in the way of documentation about it but it is coming. According to Val, it'll be sorta like our APIv2/Swagger page, where it'll be super easy to search through and have some degree of interactive-ness.
In the meantime, if we get questions about variables we should all be aware that:
1) If they change something in the Theme Editor, it'll show up in Advanced Settings.
2) 'Documented' variables are currently the only ones that come up in autocomplete.
3) All variables should work - even the undocumented ones.
If you're asked to find a variable, before making a ticket, you should try these steps:
1) See if you can figure it out using the Theme Editor.
2) Do a quick search of Github/Freshdesk to see if it's been asked about recently.
3) Go the staging site of a highly customized (Foundation-based) site. King is a good one to start with and look at their Advanced Settings - it's a pretty extensive list:
{
"quickLinks.links": [
{
"name": "All Categories",
"url": "/categories",
"id": "all-categories"
},
{
"name": "Recent Discussions",
"url": "/discussions",
"id": "recent-discussions"
},
{
"name": "Activity",
"url": "/activity",
"id": "activity"
},
{
"name": "My Bookmarks",
"url": "/discussions/bookmarked",
"id": "my-bookmarks"
},
{
"name": "My Discussions",
"url": "/discussions/mine",
"id": "my-discussions"
},
{
"name": "My Drafts",
"url": "/drafts",
"id": "my-drafts"
},
{
"name": "Somebody needs help!",
"url": "/discussions/unanswered",
"id": "somebody-needs-help"
},
{
"name": "Best Of",
"url": "/bestof",
"id": "best-of"
},
{
"name": "Groups",
"url": "/groups",
"id": "groups"
},
{
"name": "Help",
"url": "/kb",
"id": "help"
}
],
"global.mainColors.fg": "#6B6B6B",
"global.mainColors.bg": "#fff",
"global.mainColors.primary": "#00B67D",
"global.body.backgroundImage.color": "#FDFCF9",
"global.middleColumn.width": 645,
"global.fonts.size.large": 18,
"global.fonts.size.medium": 16,
"global.fonts.customFontUrl": "/themes/kinggames/design/font.css",
"global.fonts.families.body": [
"SuperGroteskOffc"
],
"global.fonts.forceGoogleFont": true,
"shadow.widget.verticalOffset": 2,
"shadow.widget.blur": 4,
"shadow.widget.opacity": 0.25,
"shadow.widgetHover.verticalOffset": 2,
"shadow.widgetHover.opacity": 0.28,
"shadow.widgetHover.blur": 4,
"tile.options.alignment": "left",
"tiles.options.columns": 3,
"tiles.options.alignment": "left",
"buttonGlobals.border.radius": 22,
"contentBanner.options.enabled": true,
"contentBanner.options.alignment": "center",
"contentBanner.options.mobileAlignment": "left",
"contentBanner.options.overlayTitleBar": false,
"contentBanner.options.hideDescription": true,
"contentBanner.options.hideTitle": true,
"contentBanner.options.hideSearch": true,
"contentBanner.dimensions.minHeight": 180,
"contentBanner.dimensions.mobile.minHeight": 120,
"contentBanner.contentContainer.padding.top": 18,
"contentBanner.contentContainer.mobile.padding.top": 12,
"contentBanner.contentContainer.mobile.padding.bottom": 0,
"contentBanner.outerBackground.image": "https://.jpg",
"contentBanner.logo.height": 156,
"contentBanner.logo.width": "auto",
"contentBanner.logo.mobile.height": 96,
"contentBanner.spacing.padding.top": 0,
"contentBanner.spacing.padding.bottom": 0,
"banner.presets.input.preset": "no border",
"banner.dimensions.minHeight": 240,
"banner.dimensions.mobile.minHeight": 240,
"banner.options.searchPlacement": "bottom",
"banner.options.hideTitle": true,
"banner.options.hideDescription": true,
"banner.border.radius": 40,
"banner.outerBackground.image": "https://.jpg",
"banner.backgrounds.useOverlay": false,
"banner.contentContainer.padding.top": 40,
"banner.contentContainer.padding.bottom": 32,
"banner.contentContainer.mobile.padding.top": 40,
"banner.contentContainer.mobile.padding.bottom": 32,
"titleBarNavigation.navLinks.fontSize": 18,
"titleBarNavigation.linkActive.bg": "#FF6A01",
"titleBarNavigation.linkActive.bottomSpace": 6,
"subcommunityChooser.options.forceIcon": true,
"titleBar.sizing.height": 50,
"titleBar.mobile.height": 50,
"titleBar.colors.fg": "#000",
"titleBar.colors.bg": "#F7F4EF",
"titleBar.generatedColors.state": "#e8e0d6",
"titleBar.overlay.background": "linear-gradient(-180deg,#fdfcfa,#f0e8de)",
"titleBar.border.type": "shadow_as_border",
"titleBar.border.color": "#e2d5c7",
"titleBar.border.width": 4,
"titleBar.spacing.padding.top": 6,
"titleBar.spacing.padding.bottom": 12,
"titleBar.swoop.amount": 45,
"titleBar.logo.desktop.url": "https://.png",
"titleBar.logo.mobile.url": "https://.png",
"titleBar.logo.heightOffset": 0,
"titleBar.logo.justifyContent": "center",
"titleBar.logo.offsetVertical.mobile.amount": 0
}
There's no easy way to tell you which each of these actually does, but you should try to logic it out and play with the variable key on your test site.
Acer is another good one to check. Any site with a Foundation-based theme built by us should have a nice list of variable keys to check through in their Advanced Settings. You can also check the variables.json file in client's git repos for this information, as well.
In theory, this post will be useless in a couple of weeks, as the full documentation should be publicly available soon. In the meantime, hopefully this will help us figure out some of these without having to rely too heavily on Support Dev escalation.
If you find a variable that you think is useful to know, post it in a comment here with a description of what it does so we can keep our own little directory while the docs are being made.
Comments
-
The doc is live!
0