CSS Targeting Text Classes not Working

Ask the community
,
1

Question:
Why are my styles that target typical text blocks (e.g,. headings & paragraph text) being ignored when I include their specific classes?

Product:
Wix Studio Editor

What are you trying to achieve:
Even though none of my questions here seem to get answered, I’ll keep asking JUST in case (as don’t know where else to get assistance for Wix Studio) :slight_smile:

I’m trying to target typical text blocks to add more additional global styling than Wix Studio appears to allow. For example, in the global typography settings, there’s nowhere to set something as rudimentary as default margins after paragraphs or headings. So if I enter a bunch of paragraphs of copy in a block on a page, they all crash into each other. Again, basic stuff.

So I see that in Wix Studio there appear to be classes added to text elements based upon the global text style (or ‘Theme’ I guess it’s referred to as). So I see ‘.font_0’ to ‘.font_9’ classes added to my H1-H6 and 3 default paragraphs. But when I try to write a style targeting these classes, they’re just completely ignored. They’re not being overwritten (due to specificity, etc.), they are just not showing up at all in the front-end.

Styles targeting just the HTML elements do work (e.g,. h1-h6, p, etc.), but as you can choose to change an HTML element on a text block separate from the theme/style you apply, this is not quite enough.

Example:
I wanted to just add some margins between my ‘Paragraph 1’ text. So just a simple style like the following is ignored!
p.font_7 + p.font_7 {margin-top: 14px;}

  • Why are styles targeting these typical and default classes being ignored or deleted?

  • How else would I target text blocks based on more than just the base HTML tag (which might not be specific enough)??

THANKS. Hoping this one gets a response…

1 Like
2

I’m no CSS expert, but I’ll do my best to answer based on my knowledge.

In Wix Studio, CSS can be applied in 2 ways - semantic classes which are available on each element. For example, buttons have:

.button
.button__label
.button__icon

Or custom classes.

Currently, I don’t believe it’s possible to apply CSS based on other attributes (such as h1-h6) - I’d be happy to be proven wrong :smile:

The way I would likely approach this in Studio is by creating custom classes for h1-h6 and also targeting the semantic .rich-text__text class.

Such as:

.h1 .rich-text__text {
    color: blue;
}

.h2 .rich-text__text {
    color: red;
}

.h3 .rich-text__text {
    color: green;
}

Then select your elements add add the custom class you want to add

Screenshot 2024-06-20 at 12.06.54

1 Like
3

Hi, thanks for taking the time to reply here.

While I know I can add custom classes to elements, to have to add a custom class to EVERY SINGLE instance of a specific element across an entire site is extremely inefficient and cumbersome, when there are obvious tags or classes that the elements are given by Wix. And we don’t want the client to have to learn how to access & use the CSS, and need to remember to do this on every single element while editing the site after we hand it over.

Wix Studio is marketed as being for more professional developers and being able to add custom CSS it touted as one of it’s biggest strengths. But not being able to target the default tags & classes we can easily detect in the front-end makes no sense at all.

Is there another forum, site, or resource where we can find access to Wix developers, or other professionals more familiar with some of the deeper aspects of custom styling in Wix Studio?

We’re finding it really difficult to locate insight on specific Wix “Studio” features & workflows, maybe due to it being new. A lot of what we find is for the older standard Wix Editor. We’re coming from WordPress development where there are literally hundreds of resources for finding answers to deeper questions about customizing & tweaking things, so this has been a real challenge.

Thanks for any insight here!

1 Like
4

This actually helped me a lot! I was having trouble importing adobe fonts using css and assigning it to specific custom classes, wix kept overwriting my code because I wasn’t targeting .rich-text_text class. Your example was key! Thank you thank you thank you! :smiley: