Text custom CSS Class not working

Ask the community
, , ,
1

Case example:

@ global.css:
.s-NameBigDuane-28dpi { font-size: 8px; }

@ frontend / public:

either:
$w.onReady(function () {
$w(“#firstName”).customClassList.add(“s-NameBigDuane-28dpi”);
});
or:
export function applyClass() {
$w(“#firstName”).customClassList.add(“s-NameBigDuane-28dpi”);
}

@ DevTools

Working in
Wix Studio Editor & Wix IDE.

What I’m trying to do
Has no effect whatsoever. The custom class is applied in console.log / DevTools, but it’s effect never take place.

I’ve seen this problem for border thickness too…

2

Perhaps this may help

3

First of all, thank you for your help.

So I’ve updated @ global.css : .s-NameBigDuane-28dpi { color: red !important; font-size: 8px !important; }

And I’ve studied the DevTool:

Think that the targeted (wix dom element) _id: #bla-bla-bla is the “container“ or something like that (I see here my color: red and font-size: 8px, also in DevTool it is a <div id=“bla-bla-bla”), but I recognize the actual color and size on this element “daughter“ (or something like that, <p class (bla-bla-bla))…

I’ve looked everywhere If I can access the “text“‘s id (instead of the text box), but I fail to see one.

4

You need to combine the custom CSS class with the semantic class Wix provides for the various parts of a component - CSS Targeting Text Classes not Working - #2 by noahlovell

e.g.

.s-NameBigDuane-28dpi ..rich-text__text {

}