Question:
Css not Working
Product:
I am using Wix Studio Editor.
What are you trying to achieve:
I want to apply custom CSS on website
What have you already tried:
I have already created a file global.css and I am writing CSS on that but that CSS not showing on frontend and also you can say it is not working.
Additional information:
The following CSS I have applied
iframe.wuksD5 {
height: 400px;
}
Certain elements are not supported in Wix Studio CSS. Like iframe, some app widgets, etc. Make sure your elementnsupports CSS. Also, check if wix actually supports the CSS format
i am trying normal tags other than iframe and these are also not working
what is css format in wix can you please explain?
Are you using CSS on a iframe/code embed?
no i am saying i am using normal css not on iframe element
On which element you have applied the CSS(Text, image, button, etc)?
applied on text but not workin
You can write the CSS for simple text, iframe.wuksD5 targets text inside the iframe. Wix Studio doesn’t support iframe elements yet. Use the CSS directly for text.
If it’s inside a iframe use style instead
why are you not understanding, i am saying i am not adding any iframe related css , i am adding on normal text that is outside the iframe element
Try changing your CSS class to something else…Like “text7” or something
When you have your text element selected, look in the code section ‘CSS Classes’ tab. You will see any ‘Global’ classes that are available for the selected element. Or you will see an area where you can type in your own ‘Custom Class’ so you can target just the specific element and not all similar elements as well.
So for a standard rich text element, the global classes are: ‘rich-text’ and ‘rich-text__text’. But if you add a style for either of these, the style will apply to ALL rich text boxes across your whole site. So this is where adding your own ‘Custom Class’ might be helpful if this is not what you are hoping to achieve.
When you stated that you added a rule targeting ‘iframe.wuksD5’, this would not work on standard text as the selector is an iframe. So you would want to change the selector to something like ‘.rich-text__text’ if you want to affect a rich text box element.
Hope this helps…
Hello there. I am having a similar problem, exclusively with custom classes. I have a paragraph html element with custom class = “content”, but when I add in global.css
.content {color: green} as I would tipically do on a CSS when adding class="content" inside the html tag, the text doesn’t change in style. Only global classes work such as rich-text__text.
Is there a reason for this or have I missed something? I have tried on free and premium websites, no difference.
Sorry, a little clarification on rich text boxes. The Custom Class you can add is applied to the rich text CONTAINER, not the actual paragraph text inside. This is the same as what is targeted globally with ‘.rich-text’. So styling added to this is typically overridden by the styles added directly to the text (e.g,. what you would set in the editor) due to specificity. Wix only gives you access to certain elements in the chain, not all unfortunately.
To target the inner text, you would either use ‘.rich-text__text’ as you discovered for global changes, or you would use: ‘.your-custom-class .rich-text__text’ to target the text inside the element with your custom class added.
As always, the devil is in the details. .content .rich-text__text {color: green} worked nicely. Hadn’t tried that combination, thanks!