Using CSS with Simpo

Updated 2 months ago by Wesley Faulkenberry

What is CSS?

Cascading Style Sheets (or CSS) is a style sheet language used to describe the presentation of a markup language such as HTML. CSS allows us to modify the appearance of Simpo's Tools, usually to match your product's branding and aesthetics.

Where can I use CSS within Simpo?

While Simpo is designed to require no coding or developer resources, you have the option to customize your Simpo experience via CSS fields found across a variety of Tools and pages, including:

  • Simpo's Configuration Page
  • Announcements (Design)
  • Walkthroughs (Global Settings)
  • Walkthrough (Builder Settings)
Only modify Simpo via CSS if you are authorized and trained to do so! Incorrect modifications can have a severe impact on the look and functionality of Simpo on your product. If you would like to apply CSS to your Simpo account and aren't sure how, please reach out to your CS representative or message us at support@simpo.com.

Useful CSS Snippets

Here is a list of useful CSS snippets that our customers or the team here at Simpo find useful. Give them a try!

Function

CSS Snippet

Where to Install?

Add a button to hyperlinks on Announcements

a{
    display:inline-block;
    padding: 15px 20px;
    background: #2B98F0;
    color: white;
    text-decoration: none;
    &:hover{
      opacity:0.8;
    }
  }

Found under the "Advanced" settings of Announcement's Design Drawer

Change the background of Simpo's Search results.

.simpo-article-container{ 
    background: #FFFFFF; 
}

Simpo's Configuration Page, under the field titled, "APPLICATION APPEARANCE (MAIN APPLICATION SCREEN CSS)"

Change the opacity of the Carousel Arrows

next-button___2mZb5 { 
    opacity: 1 !important; 
}

.prev-button___3FFGk {
    opacity: 1 !important; 
}

Simpo's Configuration Page, under the field titled, "APPLICATION APPEARANCE (MAIN APPLICATION SCREEN CSS)"

Change the color of the "Next" button on Walkthrough steps

div.simpo-walkthrough-container .simpo-walkthrough-button {
    /* Insert button css */ 
    background: #BF1818;
}

Walkthrough Global Settings, under the field titled, "Tooltip Custom CSS"

How Did We Do?