How do I pass Wix CSS into HTML embeds?

Ask the community
, , ,
1

I thought this would be simple (but as usual I thought wrong).

I need to pass the CSS my site into an HTML embed so the paragraph and any text in it changes with the Wix design and doesn’t look out of place. I tried doing it by copying the Class directive from the live page:

blah blah

As a simple test but it looks complete different. This is driving me nuts and there’s a simple solution, I’m sure but can I find it…

2

Simple-Example:

  1. Add your HTML-Component onto your Wix-page.
  2. Generate your code for your HTML-Component…
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom iFrame Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #121212;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      flex-direction: column; 
    }
    h1, h2 {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <h1>Welcome to your own custom made iFrame-Page!</h1>
  <h2>Enjoy customizing your iFrame!</h2>
</body>
</html>
  1. Paste that code into your iFrame
  2. Save it.
  3. Publish website.
  4. See result.

CSS included here…

<style>
    body {
      font-family: Arial, sans-serif;
      background-color: #121212;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      flex-direction: column; 
    }
    h1, h2 {
      margin: 0;
      padding: 0;
    }
  </style>

Well this was the manual way! To make it more dynamic, you will have to generate a post-message communication bridge, beween Wix-Site and the HTML-Component → sending data back and forth.

3

Hi, @Marc_Draco !!

I just remembered this great topic from the past and thought I’d share it. It might offer some kind of hint or inspiration. Apologies if it’s completely unrelated. :melting_face:

It looks like we’ll need to replace the entire HTML rather than just the CSS, so if possible, this might actually lead to a simpler solution. :innocent: