Cornerstone: How to change default values of padding and margin for the sections and Elements?

[dasbios]

How can I change the default values of padding and margin (“or turn them off”) for the new sections that are added with “Add Section”?

Is it also possible to change default values for Elements?

I’m running Standalone Cornerstone ver.: 7.1.10.

Kind regards.

[ruenel]

Hello @dasbios,

Thanks for writing in! Regretfully we do not have a function that allows you to change the padding or margin defaults of the Section element or any of the elements in the builder. You have the option to turn them On/Off when the Section is already added.

Best Regards.

[dasbios]

Hi @ruenel,

It used to be an option with the preset:

As specified in this post: How to change default values of padding and margin for the sections?

Was that option removed?

[dasbios]

Hi @ruenel,

If I turn Off Margin/Padding/… for a Section element, Cornerstone still outputs inline CSS with a margin/padding of 0px.

I would expect that Cornerstone will not output inline CSS since that styling is turned Off, the same way as it does not output them for other Elements, e.g. Text.

What we are doing is:

1. set initial default styling in Child Theme (linked CSS file)
   and then
2. customize it inside Cornerstone Editor (Cornerstone inline CSS - loaded after linked Child Theme CSS).

If Cornerstone inline CSS for border/margin/… is set to 0px when setting is turned Off then that does not work since the inline style of 0px overruns default values of the Child Theme.

Some of those problematic inline stylings are:

.m5g-8 > .x-row-inner > *:nth-child(1n - 0) {
    flex-basis: calc(100% - clamp(0px,var(--gap),9999px));
}

.m5g-5.x-row {
    z-index: auto;
    margin-right: auto;
    margin-left: auto;
    border: 0;
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    font-size: 1em;
}


.m5g-5 > .x-row-inner {
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    margin-top: calc(((20px / 2) + 1px) * -1);
    margin-right: calc(((20px / 2) + 1px) * -1);
    margin-bottom: calc(((20px / 2) + 1px) * -1);
    margin-left: calc(((20px / 2) + 1px) * -1);
}


.m5g-5 > .x-row-inner > * {
    margin-top: calc(20px / 2);
    margin-bottom: calc(20px / 2);
    margin-right: calc(20px / 2);
    margin-left: calc(20px / 2);
}

[marc_a]

Hey @dasbios,

As my colleague said in his previous response, there’s no option to remove the default value of the margin even though it is turned off. If you want to override the default value of the margin using custom CSS, you may use the !important keyword. To know more about that trick, you may check this documentation.

• https://developer.mozilla.org/en-US/docs/Web/CSS/important

Thank you.

[dasbios]

Hi @marc_a,

Thank you for the information.

Other elements, when margin/padding is disabled, do not output 0px, which is great!

That enables us to solve an important everyday use case:
To set up the default value of the margin/padding in our own CSS (e.g. child theme), and the client can still overrun it case-by-case in the Cornerstone GUI if he decides to.

This is not possible to do with your proposed solution with !important.

What would you recommend us to do for the above-mentioned use case?

Is it possible that you implement the same functionality for Sections, as you already have it done for all other Elements? Or please provide us with some solution that will enable us to solve the above-mentioned use case.

Kind regards.

[ruenel]

Hello @dasbios,

We will forward this and raise this as an issue with our developers. They may have a simple solution to be able to get rid of the margin output CSS for the Section.

Please bear with us. Thanks.

[charlie]

I looked into not using 0px and there was some implications with that specifically with sections. We can probably have it as a setting, but you might be fighting the stack css there.

Here are some solutions in the meantime.

1.) Use div instead of section

2.) Use an invalid margin values. In the screenshot the following values won’t work resulting in the section ignoring these values. Depending on your use case you can also use inherit, unset, or initial which might fit your use case.