Custom CSS For Section Doesn'work As Expected
Anton Majoroff
Hi.
CSS for sections and columns doesn't work the same way for elements.
If I add CCS for some section like:
.sppb-addon-text
In the page code it adds like:
#trulala.sppb-addon-text
that is, without a space after the section identifier, so the CSS does not apply.
The same thing is with CSS for columns.
Please fix it!
Rashida Rahman
Accepted AnswerHi,
Thanks for the details I was searching for. I missunderstood about the section CSS. However, I have got the issue now and reported to the team already. Thanks again for finding out the bug and reporting it back with clear screenshots.
I have checked and found the issue as follows:
https://share.cleanshot.com/pjLR1BZ6
https://share.cleanshot.com/ZCFL5s5K
https://share.cleanshot.com/vxv2fxQx
Wish you good luck:)
Anton Majoroff
Accepted AnswerHi! Please remind the team about this bug. I see that the last patch 5.7.1 didn't fix it unforunately.
Rashida Rahman
Accepted AnswerHello,
The version was already on testing phase, so it doesn't considered. I will knock my team. Thanks for the reminder.
Have a nice day!
Anton Majoroff
Accepted AnswerI'm sure it can be done in a few minutes and it will make the creation process easier.
Rashida Rahman
Accepted AnswerHi there!
Sorry to hear that.
Where are you facing this issue? May I have access to check that?
Best regards,
Anton Majoroff
Accepted AnswerHi, did you get it? ID of the section or column is incorrectly added to the CSS selector: no space is added after the identifier. You can check and verify this on any site.
Rashida Rahman
Accepted AnswerHello,
I think so.
I have already tried on my local with a random section ID and it works fine.
https://share.cleanshot.com/c3rXJXhZ
That's why asking for more details. Where did you put the custom CSS?
Best regards,
Anton Majoroff
Accepted AnswerYou didn't read my first post carefully. The problem is with the custom CSS for sections and columns, not for elements. Please try to add any CSS for some section/column custom CSS text area and check this issue. It doesn't work as expected because the space after ID is missing in output CSS code.
Anton Majoroff
Accepted AnswerExample.
Where Custom CSS is added: https://disk.yandex.ru/i/g2V5St0EFAl3zg
The output: https://disk.yandex.ru/i/LhAfZYgkUZ4ezw
You can see that there is no space between ID of the section and the first selector in the rule. But it works here because the ID and the first selector are the same. If we use any another selector as first for custom CSS rule, this rule doesn't work because the space is missing.
Rashida Rahman
Accepted AnswerHi,
I got response on this matter as follows:
"In the Custom CSS field of a section, if you intend to directly reference the section's ID, you must use the specific #addonId.
CSS written in this field is scoped to the section itself, so selectors are applied without needing additional spacing or context for the same level. However, if you need to target nested elements within that section, you should use the format #addonId .selector to ensure proper specificity and targeting."
Best regards,
Anton Majoroff
Accepted AnswerRashida, they haven't looked into the problem. Added selectors without any context for the same level have to be applied, but they don't because the CSS code is compiled without the required space after the section ID. The section/column custom CSS doesn't work as the addon costum CSS! It's very strange that I have to repeat this again, especially since you checked it yourself and made sure that the option doesn't work as expected.
Rashida Rahman
Accepted AnswerHi,
Let me clear. Please check the screenshot: https://share.cleanshot.com/yYgM5g9g
Did you try css following this rule?
#addonId .sppb-addon-text-block{
color: red;
}Please add #addonId at the begining.
Best regards
Anton Majoroff
Accepted AnswerUPD: I have tried using "#addonId", it works, but how will other users know that they need to use it? Why can't this feature work like for addons?
Rashida Rahman
Accepted AnswerHi,
Glad that it work anyway. However, I will request for documentation update including this information.
Why can't this feature work like for addons?
Not sure! Just got that answer: if you need to target nested elements within that section, you should use the format #addonId .selector
Thanks!