Customizing Elements with CSS Overrides

Jason.O.9820
Jason.O.9820 Posts: 3 🌱
Hello,

We are using an override style sheet in order to maintain consistency throughout our courses and with our brand. With the use of the Chrome Inspector, I have had some success identifying CSS elements / names and changing their attributes to suit our needs.

My question today is about the insertable elements that came with Creator +. We would like to be able to change the background and font colours in elements such as the Accordion and Tabs. Wondering if anyone might have some insight on how to achieve this. I can easily find the specific CSS tags and styles in question in the inspector, however, when we add these to our custom style sheet with updated attributes, the override does not work.

It looks like perhaps these elements and styles are defined in a web component or "shadow DOM", and that is why the override tags are not working.

I am not a developer or coder, just a designer who knows his way around HTML and CSS. So I am hoping there is perhaps a proper way to declare / target these elements from our override style sheet with which I am unfamiliar.
Tagged:

Best Answer

  • Chris.S.534
    Chris.S.534 Posts: 375
    Answer ✓

    Hi Jason,

    Creator+ elements and practices cannot be modified by scripts and stylesheets. However some parts of elements are editable with a html editor, which may give you an option to alter things like colour.

    The ability to modify Creator+ styles with CSS is a good one. You should consider making a submission into the the Product Idea Exchange for review and consideration.

    Hope this helps!

Answers

  • Jason.O.9820
    Jason.O.9820 Posts: 3 🌱

    Thank you, Chris. I have submitted this suggestion to the Product Idea Exchange. Would love to hear from other users about their experience and success with using the CSS Override feature!