CSS: .myClass .wixClass {property: value} NOT working

[Gabriela_Todorut]

I’m having trouble with:
When working (alongside the “semantic classes provided”) with CSS in Wix Studio, generally won’t work at all (at least not intuitively or as stated in Wix documentation), with the exception of “.rich-text__text“ ofcourse… .

Working in

• Wix Studio Editor,
• Wix IDE

What I’m trying to do
I’m trying (via CSS code) to change the color of a progress bar, and by “working alongside the semantic classes provided“ will just NOT work:

ex: .myProgressBarClass .progress-bar {background-color: red}

I’ve tried it all: .progress-bar, .progress-bar__barBackground, root, background etc… , just by adding the “semantic classes provided” will simply throw the class off the radar and will not appear in the DevTool at all.

Till now, “.rich-text__text“ is the only “thing“ that will not throw the class away. If I delete the “semantic classes provided”, the class will appear again in the DevTool, but it paints the background of the “case“ holding the progress bar, instead of the progress bar itself, and I have to dictate (through CSS) both background and foreground… .

• Also here, I’ve tried by changing the property (inspired by the actual element in the DevTool) from “background-color:“ to “background:“, “–barBackgroundColor:” etc… to no avail. The “–barBackgroundColor:” makes the bar disappear.

In the DevTool is something like this (the element that actually dictates the color of the progress bar):

.ProgressBar3682656523__root
.ProgressBar3682656523__barBackground {
background: var(–corvid-background-color, rgba(var(–barBackgroundColor, var(–color_8)), var(–alpha-barBackgroundColor, 1)));
height: 100%;
width: 100%;
}

… and I cannot find any way to overwrite this with a custom CSS Class, either with/without “working alongside the semantic classes provided“.

This problem rears its ugly head in all other aspects in my project, and except “.rich-text__text“ for text, nothing works:

• .image
• .vector-image
• “grids” etc…

For most of the previous impediments, I’ve found work-arounds, as example for the border of an image, to dictate via CSS class its width, corners and color.

Simply ditch the whole thing, cancel the image border in the Editor and just work with its “casing“ (the alleged element that you’ve created in the editor), give it a border, define de corners and color and just hide the overflow… hence here also the “semantic classes provided” won’t work at all.

Same thing with .vector-image, to paint decorative icons. Simply ditch the “semantic classes provided” (are useless and/or bugged) and put two “-“ in front of the property (–fill: #0d2438;).

Grids are even worse… the grid of the element you create in the Studio is not the same with the grid-element that actually holds the “stuff” you put in “that grid“, and till now I haven’t found the way to overwrite the “real-grid-element“‘s grid properties. Just work-arounds.

Why these problems so far?
As I’ve pointed out in the case of “grids”, in all instances the DOM element that you create in the Studio is not actually the “real-DOM-element“ that appears on the website, but more like a mockup of it.

That is why (except in the case simple boxes) you can hardly dictate (through CSS Classes) any property of the elements that appear on your website, and more often, in the Studio you create 1 element but “that element“ is actually comprised of multiple other elements that you have no access to (at least not intuitively).

WIX documentation?
The documentation so far is more like going to the dentist with a severe toothache and all you get are “5 y.o. “tutorials“ on how to bush your teeth”, as if you’ve never done that ever before. It’s frustrating…

.progress-bar {
width: 100%;
height: 30px;
background-color: grey;
}

Wix link to: MDN CSS reference docs on the other hand, is very useful, but it’s like reading a whole human anatomy compendium in order to pull a splinter out of your thumb, besides that “it lists not“ the wix’ “.puppet__elements“ (for obvious reasons… WIX IDE !== MDN CSS).

…

I’ve already gone in the last 6 months from a complete-code-illiterate & code-uninterested to writing my own +20k lines of code (depends how you count them) that works, both backend and frontend (and custom CSS classes), building a variable-criteria dynamic-infrastructure (aka “skins“ mechanism), plus a (created from scratch) multi-sheet complex google sheets table-tool that helps me write hundreds of code-lines via a “more-human interface for coding“, and I would definitely wish not to spend my next 6 months learning full-stack development just to paint my progBars red…

I consider myself still a code-noob, even though now I understand much of it, my project is already 90% done and I just need a little help with the non-intuitive parts (the “hocus-pocus-bogus” parts), like for the things mentioned above (icon color, even the icons via icon URL is also not working, or I don’t know the “semantic classes provided“ hence those mentioned in the editor, bottom right, CSS class tab, don’t work), … at least not intuitively.

… so I kindly ask for proper help on this matter. At lest point me to the right documentation if it’s too much to write here, just please no more “5 y.o. tutorials on how to bush my teeth”.

Extra context
Anything else that might help - edge cases, screenshots, etc.

[onemoretime]

Hi, @Gabriela_Todorut !!

Hey, this might not be the perfect solution you’re looking for, but it seems like changing the color isn’t entirely impossible.

/* for vectorImage element */
.myCustomClass path {
  fill: red;
}

/* for progressBar element */
.myCustomClass [data-testid="progressbar-foreground"] {
  background-color: red;
}

As I mentioned to you before, I personally also wish there were a more official method.

[Gabriela_Todorut]

Thank you a TON @onemoretime !!!

It works! Both of them:

1. for the vector image:

.myCustomClass path {
fill: red;
}

It works perfectly & tested & confirmed. I’ve also changed the properties in the “setup table“ just to check if it applies because it works or because of a glitch / catch etc… , and it works perfectly, tested and confirmed.
… some details, maybe is relevant for others having this or similar issue:

• with the “path“ thing, it takes the “item“ off of the DevTool, but for what I need it doesn’t bother me as long as it does its job.
• if you let me push it a bit… in the case of vector-images that have more than one color (two or three), how should I write the properties (what is in the “{…}”), because if I just write “fill 1, fill 2, fill 3“ obviously won’t work. (this is not a dire issue, more of a “cosmetic“ one, no problem if you don’t know how, just asking.)

1. for the progress bar:

.myCustomClass [data-testid=“progressbar-foreground”] {
background-color: red;
}

I’ve tried it for the moment with “[data-testid=“progressbar-background”]“ (hence I don’t have yet data in the CMS so that the foreground to be >0), and it works perfectly, tested and confirmed. I’m positive sure that the foreground one works too, and I will test it soon.

I thank you again @onemoretime for your answer & help, and since you solved two of my issues (and so that I can check as solved both of your replies), you can a copy/paste the vectorImage one on my previous post so I can check your message as “solved the issue“ there too. (link: CSS custom class does not apply as stated - #10 by Gabriela_Todorut ).

Also I’m planning to open another thread for the “grid“ issue, (it’s not a burning issue since I’ve found workarounds) so that if there is a solution, others can have access to it too.

[onemoretime]

The information I shared this time is something I had experimented with earlier and added to my Notion notes for global.css. I’m not very good at CSS and tend to forget things easily… haha. So if any of this was even a little helpful, I’m glad. As for whether multiple parts of an SVG can be changed dynamically, I think it really depends on the internal structure of the vector image, so it might be difficult to give a general answer. If the SVG is simply made up of multiple paths, it might be possible to target each one individually using a selector like nth-of-type.

.myCustomClass path:nth-of-type(1) { fill: blue !important; }
.myCustomClass path:nth-of-type(2) { fill: green !important; }
.myCustomClass path:nth-of-type(3) { fill: purple !important; }

I actually tried this approach on some of the icons provided in Wix Studio, and a few of them did work. So it may be one of those methods that works fine for simpler vector images. That said, rather than relying heavily on CSS, I personally feel that editing the vector image locally to create different color variations and swapping them out when needed often ends up being the easier approach.