Advice and answers from the UserGuiding Team
Users
Engagement
Settings
Customizing the Quit Button for Guides and Hotspots
Learn how to customize the quit icon.

You can customize the quit icon by following these steps:

  • Access the Themes section
  • Click on the CSS tab

If you want to change its size, please change the viewport (width and height) for these two CSS rules. In the example below, we changed them to 15 pixels:

 

* Preview quit/x button outer container styles */
#userguiding .ug-preview-quit-button
{
width: 15px;
height: 15px;
justify-content: flex-end;
align-items: flex-start;
}

/* Preview quit/x button svg container styles */
#userguiding .ug-preview-quit-button svg
{
background-color: transparent;
width: 15px;
height: 15px;
}

 

Apart from size, If you want to style the outer container and SVG separately, apply your CSS properties individually.

Did this answer your question?