Style Overrides/Modifications

Overall there are 2 different ways of customizing the Epigraph UI to your liking:

1. CSS Variables

For simple customizations like changing the Primary and Secondary Colors for the entire UI at once. We recommend using the CSS variables approach, since this could save you a lot of time if the customization is simple.

Just add a selector for the <epigraph-configurator-lite /> web component. This can either be an ID selector or a class selector or any CSS selector of your choice. In the example below we have used and ID selector and it contains a list of available variables to update and their default values:

📘

Please ensure to use the !important keyword after the values that you update below in your codebase to ensure that it overrides any internal values. More info here: https://www.w3schools.com/css/css_important.asp

#epigraphConfiguratorLite {
  --epigraph-primary-brand-colour: #FCF8EF;
  --brand-primary-colour: #4A5135;
  --brand-primary-colour-dark: #4A5135;
  --brand-primary-text-colour: #232323;
  --loader-colour: #B18862;
  --brand-primary-font-family: karla;
  --bottom-panel-fixed-height: 200px;
  --brand-utility-item-hover-color: HEX CODE COLOR;
  --brand-utility-item-active-color: HEX CODE COLOR;
  --shadow-colour: #00000010;
  --hotspot-width: 30px;
  --hotspot-primary-colour: white;
  --hotspot-secondary-colour: #7E8763;
  --hotspot-border: 3px solid var(--hotspot-secondary-colour);
  --hotspot-visited-border: 3px solid var(--hotspot-primary-colour);
  --hotspot-border-radius: 50px;
}

2. FULL CUSTOMIZATION CONTROLS

If just the exposed CSS variables do not satisfy what you are looking for. Here is a way to customize virtually everything that we have a CSS selector for:

In your HTML file, before mounting the epigraph web component (could be any of our solutions), attach this HTML Template to the page

<template id="epigraphCustomStyles">
</template>

📘

NOTE: It's important to remember that whatever styling you assign in here will be picked up by all epigraph components within a given session so if you change .hotspots in one, it will change in all.

Within this template, you may use any custom styling you would like, similar to a CSS file.

<template id="epigraphCustomStyles">
  <style>
    .hotspot {
      border: 3px solid rgb(204, 204, 204) !important;
      outline: none !important;    
      background-color: rgba(186, 186, 186, 0.6) !important;
      backdrop-filter: blur(3px);
    }
  </style>
</template>

To get the CSS selector, inspect that element in your browser's dev console and you may either use a class selector or the id or essentially any valid CSS selector.