Custom CSS Not Working - Question | JoomShaper
Back to the questions

Custom CSS Not Working

DM

Diego Mello

SP Page Builder 1 year 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

0
5 Answers
Order by
Oldest Newest Votes
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #156466

Hi

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

-Regards.

0
DM
Diego Mello
Accepted Answer
1 year ago #156566

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!

0
Pavel
Pavel
Accepted Answer
1 year ago #156475

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;
}
0
DM
Diego Mello
Accepted Answer
1 year ago #156565

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?

0
Pavel
Pavel
Accepted Answer
1 year ago #156573

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.

0