How to remove the section background-color

[ctrlspatie]

Hello,

In Pro I can set the background of a section to any color. This works just fine until I want to set it in a child theme like this:

.x-section.blob02 { background-color: pink; }
.x-section.blob03 { background-color: fuchsia; }

Rather than setting the background-color to ‘transparent’ I need it to be removed from the index. Just deleting the color information in the section leads to the following:

How can resolve this?

[friech]

Hi There,

Thank you for writing in, but I’m not sure what do you mean I need it to be removed from the index, please clarify.

What you have now works just fine, you can also add !important on your CSS rule.

.x-section.blob02 { background-color: pink !important; }
.x-section.blob03 { background-color: fuchsia !important; }

Using !important with CSS

Cheers!

[ctrlspatie]

Hi @friech,

Thanks you for your answer. Using !important works indeed, but is not a ‘proper’ coding solution.

A solution would include .e5-1.x-section not to appear in the generated style declaration in index.php. <style id="x-generated-css">...</style>

Essentially, shouldn’t this be the behaviour for any setting that is left empty in Pro (or X)?

Thank you, Marc

[christian]

Hey Marc,

When I emptied the background color in my test site like this:

there’s no background-color property being outputted like your screenshot.

Please ensure you’re using the latest version.

The !important rule is neither good nor bad. It only becomes bad “practice” when not used properly. For your case, it is not bad as I see it will be used as a utility class? If that’s not the case, then it’s not proper. If you’re adding CSS in style.css only for one page, that is not proper coding as well. It is not for me to tell you what’s right or wrong though. I’m just giving more context in here.

Thanks.

[ctrlspatie]

Hello,

I keep running into the same issue on several locations.

An element has a pre-defined setting in Pro (like margin, or font-size), which forces me to use !important in my style.css.

In the case below I defined margin and font-size for an H1 headline, which unintentionally gets overwritten element-settings in Pro.

I want to be able to define the default in CSS, and then overwrite in Pro when I need it. How do I ‘switch off’ settings for, in this case, margin and font-zize?

It would be very helpfull if all elements in Pro were ‘clean’, without any styling (and keep all styling in stackname.css).

[nabeel]

Hi again,

Each element’s style is generated by it’s settings (see screenshot)

As you see in the screenshot, the margin is set to 0 and the font-size is set to 1em, that is exactly reflected in your screenshot. you can simply adjust the margin or font-size as per your need using the controls instead of overriding the style in style.css file.

Hope this helps!