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):
I’ve tried it all: .image , .img, etc… nada.
The solution was to ditch it all: cancel the image border and simply work with the “casing“ border, width and color and hide the overflow of it (aka the DOM element available in editor).
… with or without “semantic classes provided“ (except “.rich-text__text“) is the same thing. Either it doesn’t work at all, or there is less than poor documentation on the matter at hand.
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.
Example as to show that I’m not exaggerating:
The task: I want to dictate the vector image and its color via (a dynamic) code:
-
Wix documentation:
.vector-image {
stroke: black;
stroke-width: 2px;
filter: hue-rotate(45deg) opacity(0.65);
width: 150px;
} … and that’s it.
-
Wix link to: MDN CSS reference docs. 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 that works (depends how you count them), both backend and frontend (and CSS classes), building a variable-criteria dynamic-infrastructure (aka “skins“), 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 def. wish not to spend my next 6 months learning full-stack development just to paint my icons 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, 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 the knowledge I lack would require a ton of text, just please no more “5 y.o. tutorials on how to bush my teeth”.
So…:
adding to the css class: .vector-image , .vector-image__ color / fill / stroke / whatever, doesn’t help.
examples of my CSS classes:
-
.d-artEmailIconDuane (w/o .vector-image…) {
background-image: url(‘wix:vector://v1/11062b_ff0f0d3f2ca344f39bfd016a693ce18e.svg/Mail%20outline.svg’);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
… to dictate the vector (svg image from wix database, via url) that I want for this “icon“
-
.c-fill-DefaultDark (w/o .vector-image…) {fill: #4D4D4D;}
… to dictate the color that I want for this “icon“
Another very confusing pain in the… “backend“ are grids!!! Because the grid of an element created in the Wix Studio !== the actual grid of child-elements placed in “that grid“… . In the DevTool, I can see “MyGrid“ but the stuff that populates this grid, actually populate another grid-element to which I don’t have access to in the Studio… .
How do I super-impose / overwrite via custom CSS Class the grid settings that I actually need over the wix-ghost-elements that actually hold the child-elements? “!important“ is completely useless… .
And above this, by placing an element in the last column of a grid via CSS Class, actually puts that element after / outside the grid instead of “the last column“, and pushes the grid to the left… . so in a 9x9 grid, I have to place the item in the 8th column and make the 9th min-c in order to “visually occupy the right-most part of the grid“.
