Styling

• Last updated on August 1, 2024
• •
• 1 minute to read

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

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

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

• Inherits styles from the page, for example, for font-family, font-size.
• Overrides CSS styles with variables that cannot be inherited, for example, colors for different button types, margins, layout, etc. For the complete list of the CSS variables, refer to the corresponding workflow element.

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

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

Important

When embedding several style files to 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.

When adding a static <style> element is not feasible, you can modify the styles dynamically using JavaScript code. There are the following methods you can use:

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 descriptions of CSS variables, refer to the corresponding workflow element, for example, Handy Editor.

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