Using CSS with Simpo Plus

Updated 2 weeks 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 Plus's Tools, usually to match your product's branding and aesthetics.

Where can I use CSS within Simpo Plus?

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

  • Simpo Plus's Configuration Page
  • Announcements (Design)
  • Walkthroughs (Global Settings)
  • Walkthrough (Builder Settings)
Only modify Simpo Plus 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 Plus on your product. If you would like to apply CSS to your Simpo Plus account and aren't sure how, please reach out to us at support@simpo.io

Useful CSS Snippets

Here is a list of useful CSS snippets that our customers or the team here at Simpo Plus 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 Plus's Search results.

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

Simpo Plus'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 Plus'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"

Useful CSS Selectors

Here is a list of useful CSS selectors that can be used in the configuration page for setting custom CSS

Main search container

.simpo-search-container

Active search item

.simpo-search-item-active

Search input field

.simpo-input-container

Search options container

.simpo-search-items-container

Search titles

.simpo-search-item-title

Articles container and content

.simpo-article-content

How Did We Do?