Styling

• Last updated on February 20, 2025
• •
• 1 minute to read

The styles of a workflow element are contained in its styles.css file, which should be linked to integrate it into a page. For example, to attach the styles of the Simple Editor, add the following meta tag:

<link href="https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements/simple-editor/styles.css" rel="stylesheet" type="text/css">

Customer's Canvas supports two approaches to make the elements appear as if they were designed specifically for the destination page:

• Inheriting styles from the page: This includes properties such as font-family and font-size.
• Overriding CSS styles with variables: This applies to properties that cannot be inherited, such as colors for different button types, margins, layout, etc. For a complete list of the CSS variables, refer to the corresponding workflow element.

To override the default styles, you can add the <style> tag after including the CSS file and redefine the CSS variables there.

<style>
  body {
    background: black;
  }
  :root {
    --se-accent-color: green;
  }
</style>

Important

When embedding several style files into a page, the later the file is declared, the higher priority it will have. However, the styles specified in the <style> element are applied with the highest priority.

If adding a static <style> element is not feasible, you can modify the styles dynamically using JavaScript code:

1. Write and call a function that directly changes the values of variables:

   window.addEventListener("DOMContentLoaded", async () => {
     function setCssVariables(){
       const root = document.querySelector(':root');
       root.style.setProperty('--se-accent-color', 'green');
     }
     setCssVariables();
   }
   

2. Write and call a function that adds a tag with new values to the page:

   window.addEventListener("DOMContentLoaded", async () => {
     function modifyCssVariables(){
       const stylesTag = document.createElement('style');
       stylesTag.textContent = `
       :root {
         --se-accent-color: green;
       }`;
       const headTag = document.querySelector('head');
       headTag.appendChild(stylesTag);
     }
     modifyCssVariables();
   }
   

---

For the list of supported CSS variables, refer to the corresponding workflow element, for example, Simple Editor.

You can also use slots that will not only fit the appearance, but can also change the functionality of workflow elements.