How to style HTML code inside of Rich Content field?

Ask the community
, , , ,
1

Question:
How can multiple HTML code snippets be styled within Rich Content field without repeating CSS code?

Product:
Editor X

What are you trying to achieve:
I have designed a Tips panel that I use within Rich Content fields whenever I need to insert some sort of a tip relevant to content of a blog or guide that I’m working on. Here’s a screenshot of the tip panel as an example:
Styled Tips panel
I use these panels all over my site! I have dozens of them and each live in HTML code block in Rich Content field. HTML code block consists of style tag and corresponding HTML.

I recently needed to make a change to style of the Tip panel which meant I had to go through dozens of these embedded HTML code snippets and update style tag in every single one of them.

That took hours of my time and I’m just starting to build my site. I cannot imagine having hundreds or even thousands of these tips panels across all of the blog posts and guides that I will be creating and having to update style tag in all of them if I want to make a slightest style change.

With that as context, the question then is:

Is there a way to have the HTML code block inside of Rich Content field hold only HTML and store/manage relevant CSS code elsewhere?

This way if I would need to update styles in CSS, I would make a change in one place and all related HTML code blocks inside of all Rich Content fields would respond to the change automatically?

What have you already tried:
I already tried going to Settings > Custom Code in Wis Studio and adding the style tag with all the relevant CSS styling to the head element. That didn’t work because it looks like the HTML code inside of Rich Content field is rendered as an iframe so the Tip panel doesn’t respond to CSS included in the head element of my site.

I also tried adding the CSS for styling the Tip panel to the global.css file that’s part of my Wix site. That didn’t work either. I’m guessing for the same reason - my site’s CSS doesn’t apply to iframes.

2

Found a solution. CSS files can be hosted on GitHub pages. Once hosted, a link to CSS file can be used in HTML code element inside of Rich Content element. This way, CSS files can be updated in GitHub and instantly reflected across all instances of HTML Code elements.

This whole process would be much simpler if there was an option write HTML directly in Rich Content element and have it be rendered as HTML elements and not an iframe. That would enable us to use Custom Code option in Settings section (or the global.css file that’s part of Velo) to store styles. That would eliminate the need to use iframes and finding some other site to host CSS file.

Hoping Wix is working on a solution that’s less wonky than using iframes to add HTML code to Rich Content and other places.

1 Like