All Collections
Engagement
Themes
Styling your onboarding content with CSS
Styling your onboarding content with CSS

Find out how you can use CSS to style your onboarding content.

Efehan avatar
Written by Efehan
Updated over a week ago

Overview

UserGuiding offers to style your content with CSS in addition to point-and-click styling in Themes. This article explains how you can fine-tune the styling of your onboarding content, including Guides, Hotspots, etc.

Where do I find the CSS settings?

In your Panel, navigate to the Themes section under the Customization tab. As a best practice, while changing the styling of your content, duplicate the existing Theme or create a new one. This way, you'll keep your default Theme as a fallback if you need to use it.

While editing a Theme, you'll notice some point-and-click styling options. Before styling with CSS, we recommend you check the default options not to overlap and cause unexpected behavior.

To proceed with editing the CSS, navigate to the CSS tab. Once you finish styling, do not forget to click on Save and Publish Changes.

Important: Writing CSS is advanced. Although this is an available feature, it's really hard to provide support for it. So please make sure you or someone on your team is comfortable editing CSS before you begin.

Reminders

  • Please preview and test a theme that you changed with CSS before publishing. This way, you'll ensure recent changes do not cause any unforeseen issues with your onboarding content or the displayed page.

  • While we do our own cross-browser compatibility testing, we can not guarantee if your content will operate as expected. Therefore, please make sure you conduct the tests where applicable.

  • Pay attention not to use body or HTML tags in the CSS settings since it may cause the content to break or not show when published live.

  • The selectors listed below are subject to change at any time. Please use the browser inspector to determine up-to-date selectors.

CSS Example

Did this answer your question?