Using CSS with Simpo Plus

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 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)
  • Quick Search (Widget configuration)
For help with personalizing walkthroughs, please visit its designated entry.
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)"

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?