Awaiting an answer SP Page Builder

Custom CSS not working

Asked by Diego Mello 2 years ago Last activity 2 years ago

Hello there,

I am working on a website and need to use Custom CSS. I have added the rule I need, but no matter what I do, when I load the page the rule is not being respected.

I need to add a line to left side of a Heading Addon, but the result is only the foll outline of the element.

I am runnign SP Page Builder latest version and Helix Ultimate, no template.

I activated the Use Border option and on the Custom CSS field I used the following code:

#sppb-addon-1b7a2664-3a76-4b4c-afa5-472418e2c376 {
    border-width: 0 0 0 2px !important;
    border-color: #e13505;
    border-style: solid;
}

When I loand the page, it shows the full box and the code above isn't showing when I inspect the page code on the browser.

Any directions?

Thanks in advance,
Diego

3 replies

Mehtaz Afsana Borsha Staff

2 years ago

Thanks for contacting us and sorry for your issue. Could you please give me your site URL and also screenshot of your issue?

-Regards.

Diego Mello Asked this

2 years ago

Hello Mehtaz,

Ifound a workaround to the problem and made it work, although the solutions creates additional code on the page.

How can I share screenshots with you? Just with links?

Thank you!

Pavel

2 years ago · edited

CSS field I used the following code

Hi. Are you talking about the CSS field inside the addon? When using this field, the addon's ID is automatically added to the selector that you use there. Therefore, at the output you get a code that will not work, like this (wrong selector).

#sppb-addon-1b7a2664-3a76-4b4c-afa5-472418e2c376 #sppb-addon-1b7a2664-3a76-4b4c-afa5-472418e2c376 {
    border-width: 0 0 0 2px !important;
    border-color: #e13505;
    border-style: solid;
}

If you use addon's ID as selector, then the code should be added to Page CSS field or to Custom CSS Helix field or to custom.css file in Helix (the best option). Turn off Use Border option if you want to use CSS.

I would recommend that you do not use CSS Field inside an addon. In this field, you will not be able to edit the code for mobile devices and this increases the total amount of code, which harms performance.

And so it would be better

#sppb-addon-1b7a2664-3a76-4b4c-afa5-472418e2c376 {
    border-left:  2px solid #e13505 !important;
}

Diego Mello Asked this

2 years ago

Hello Pavel!

Thank you very much for your reply and clarifications on this. I understand your recommention to not use the CSS Field inside the addon, makes total sense. Anyway, how should I add CSS code on the Custom CSS Field?

Pavel

2 years ago

Anyway, how should I add CSS code on the Custom CSS Field?

Hi. In this field, you can only use Addon ID's child selectors. To determine them, use your browser Dev Tools.

An example with a Text Addon. The selectors marked with red should not be used in this field.