Custom styling is a way to customise your Layer instance using Cascading Style Sheets (CSS). Identify the element(s) you wish to modify, applying a style rule, and apply this at tenant level in company settings.

You can apply custom styles the following elements:

  • Layer Application - The main site

  • Layer Portal - The client portal

  • Layer Knowledgebase - The knowledgebase tool

  • Layer Public Endpoints - Sign pages, case rating pages, etc.

We don't recommend performing a full overhaul of our UI using CSS. Instead, this feature is designed to allow you to change colours/styles of certain key design elements to meet your brand requirements.

Our site design is subject to change in the future, which means the CSS styles you design today might not always apply. We'll give you plenty of notice should this happen.

Creating Styles

To get started, head to Styles in Settings:

Next, create a new stylesheet:

The best way to find out which elements you wish to style is by looking at the page's source, finding standard classes or IDs, and adding styles accordingly.

For example:

In the example above, if we wanted the image in .menu-layout-section to have a border, we'd add:

.menu-layout-section img { border: 1px; }

Applying Styles

When you're ready to apply this style to a Layer element, you can head to company settings and hit on the "Styling" tab.

From here, you can apply styles to the specify Layer element you wish to customise.

Please note this is an advanced feature and can have negative impact on your users' experience if not completed correctly. Please consult us via live chat if you have any questions about using this feature.

Did this answer your question?