Forcing Section Properties

Developer Support CMS Development
1

I’m trying to create a section template as part of my overall theme for our company. This theme/styling needs to be fairly strict to ensure all those who are editing the website are following the rules (spacing, padding, center content, colors etc).

However, I can’t seem to find any where that I can set/control the properties of a section template. This gives the content creators all sorts of freedom to break the rules LOL

Is there any way that I can disable or override these fields (or provide other options/choices/properties similar to modules)

sections.png
sections.png397×860 36.4 KB

2

Hey @brcewane,

I’m currently exploring those features as well - what I can say is:
You can’t disable those features right now, but you can surely overwrite them and make them “global”.

The way to go is to put number or spacing fields into the theme fields.json file like

{
				"name": "container_width",
				"label": "Container width",
				"required": false,
				"locked": false,
				"display": "slider",
				"step": 1,
				"type": "number",
				"min": 900,
				"max": 1600,
				"inline_help_text": "",
				"help_text": "Set the width of your content in pixels",
				"default": 1440
			},{
								"name": "row_spacing",
								"label": "Row spacing",
								"required": false,
								"locked": false,
								"type": "spacing",
								"inline_help_text": "Left and Right padding won't have an effect",
								"help_text": "",
								"default": {
									"padding": {
										"top": {
											"value": 1.25,
											"units": "rem"
										},
										"bottom": {
											"value": 1.25,
											"units": "rem"
										},
										"left": {
											"value": 1.25,
											"units": "rem"
										},
										"right": {
											"value": 1.25,
											"units": "rem"
										}
									}
								},
								"visibility": {
									"hidden_subfields": {
										"margin": true
									}
								}
							},

And put something like this into your theme-overrides.css

...
{%- set container_width = theme.advanced.container_width ~ "px" -%}
{%- set row_spacing_top = theme.advanced.row_spacing.padding.top.value ~ theme.advanced.row_spacing.padding.top.units -%}
{%- set row_spacing_bottom = theme.advanced.row_spacing.padding.bottom.value ~ theme.advanced.row_spacing.padding.bottom.units -%}

.dnd-section > .row-fluid{
 max-width: {{ container_width }};
 padding-top: {{ row_spacing_top }};
 padding-bottom: {{ row_spacing_bottom }};
 margin: 0 auto {# for centering the div #}
}

In this example I’m using following theme fields.json structure:

/ theme
// advanced (group)
/// container width (number field)
/// Row spacing (spacing field)

If you want to know more about “corporateizing” themes, let me know.

best,

Anton