Custom CSS is Not Working on Assistant articles

If you've added a styling directly to a tag and it's not taking effect, chances are that it's not specific enough.

For example, the below CSS in your custom CSS file will not work, because elevio has existing styling applied to those tags that are more specific.

// WILL NOT WORK

h1 {
  font-weight: 500;
  line-height: 1.1;
}

In order to override elevio's styling, append !important on the values of the declared styling that you want to override.

// WILL WORK

h1 {
  font-weight: 500 !important;
  line-height: 1.1 !important;
}

This is the easiest method to ensure that the custom CSS styling will override elevio's styling. Read more about specificity here.

Alternatively, if you are comfortable using your browser's Dev Tools, inspect the elements to see the existing selector names to override them. Including them in the custom CSS should then do the trick:

// WILL ALSO WORK

#_elev_io .1rkeb h1 {
  font-weight: 500;
  line-height: 1.1;
}

And should you want to learn more about Chrome's Dev Tools, check this link out.

NB: Adding Custom Styling for articles under the Assistant settings (https://app.elev.io/settings) is different from adding Custom Styling to the Knowledge Base (https://app.elev.io/kb). These custom styles have to be managed separately, on the two different settings pages.