Styling the element inside a HTML element

[vwasteels]

Hello,

I need to style HTML content inside a WeWeb HTML element.

The HTML content comes from a WYSIWYG through an API and I need to style its content.

Any idea ?

Thanks

[Marc]

Hi,
you could try to add another HTML element containing the style, in the format :

<style>
.my-class {
   color: red;
}
</style>

If I understand your issue correctly, this should be a good solution.

[vwasteels]

Hey,

Thanks for your answer !

It is not exactly what I am looking for.

Attached is an example of the situation, first the rendered content, then the HTML element settings. For example, I need to change the color of the text marked as strong.

Thanks again !!

[Marc]

You can add an id to your HTML element (in the settings tab of the element) and create a second HTML element with this css :

<style>
   #my-element-id strong {
       color: green;
   }
</style>

[vwasteels]

This works fines !

Do you know if I can use a color from the design system ? maybe a as a CSS variable ?

Thanks

[Marc]

You can but it’s a bit of a hack.

• First you need to get the ID of the color in the design system.
  This ID isn’t displayed anywhere in WeWeb.
  To get it you need to open some binding, go to Javascript and select the color. You will see some ID that you need to copy
  

  

• Then you need to use the color in your CSS :

<style>
    #my-id strong{ 
        color: var(--10805bf0-d64b-4c3b-a1db-0722db3db56e); 
    }
</style>

Keep in mind that this a hack and that we might change the way the colors work internally in the futur. It is not planed for now and we might also never change it.

We could also add a way to get the css value of the color directly from the color panel itself.

[vwasteels]

Ok, thanks for the detailed answer !!