Unlike the standalone website version of the Sleekplan app, where you can modify CSS styling directly through the Admin Dashboard, the widget version of Sleekplan does not currently allow CSS overrides via the backend.

This workaround provides an alternative: by injecting inline CSS into the Sleekplan widget iframe, you can still customize the look and feel of your widget beyond the default options.

Below, we’ll show you the script you need, explain how it works, and provide some examples of what you can customize.

The Script

Copy and paste this code into your page where the Sleekplan widget is embedded:

window.document.addEventListener('sleek:init', () => {
 $sleek.on('open', function() {
 let cssContent = `* { font-size: 30px; font-family: Arial; }`;
 let iframe = document.getElementById('sleek-widget');
 if (iframe && iframe.contentDocument) {
 var styleElement = iframe.contentDocument.createElement('style');
 styleElement.innerHTML = cssContent;
 iframe.contentDocument.head.appendChild(styleElement);
  }
 });
}, false);

How It Works

Let’s go through the main parts of the script:

window.document.addEventListener('sleek:init', …)

Ensures the code only runs after the Sleekplan widget has been initialized.

$sleek.on('open', …)

Waits until the widget is opened by the user before applying the CSS.

let cssContent = `* { font-size: 30px; font-family: Arial; }`;

Defines your custom CSS rules as a string. You can replace these with any CSS styles you’d like.

var styleElement = iframe.contentDocument.createElement('style');

Creates a new <style> tag inside the widget’s iframe.

styleElement.innerHTML = cssContent;

Inserts your CSS rules into the new <style> tag.

iframe.contentDocument.head.appendChild(styleElement);

Appends the style into the iframe’s <head>, applying the CSS to the widget.

Practical Examples of Styling You Can Apply

1. Style the Widget’s Title and Subtitle text 🖌️

Instead of affecting all text, target just the main title and subtitle inside the widget:

 let cssContent = `
          /* Style the main widget title */
          .head h1 {
            font-size: 28px !important;
            font-weight: bold !important;
            color: #e81336 !important;
            font-family: 'Arial', sans-serif !important;
          }

          /* Style the subtitle text */
          .head h2 {
            font-size: 18px !important;
            color: #555 !important;
            font-style: italic !important;
            font-family: 'Arial', sans-serif !important;
          } ` ;

2. Style the “Create a Post” Button 👈

Styling example applied to the “Create a Post” button :

            let cssContent = `
  /* Style the "Create a Post" button */
  .main-button a.button-inner {
    background-color: #ff6f61 !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    transition: background-color 0.3s ease !important;
  }

  /* Ensure the button text is white */
  .main-button a.button-inner .button-text div {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    font-family: 'Arial', sans-serif !important;
  }

  /* Optional: Change button background on hover */
  .main-button a.button-inner:hover {
    background-color: #ff4b3c !important;
  } `;

3. Applying styling to the Upvote buttons 💡

Modifying the Upvote buttons next to each feedback post :

let cssContent = `
  .vote-button.plus {
  background-color: #8bc24a !important; /* New background */
  border-radius: 50% !important;        /* Make it circular */
  padding: 5px !important;              /* Add some spacing */
}

.vote-button.plus:hover {
  transform: scale(1.2) !important;     /* Grow slightly on hover */
} `;

Common CSS selectors you can use in your script

1.Titles & Text

Element	Selector	Notes
Main title	`.head h1`	Example: “Hi there 👋”
Subtitle text	`.head h2`	Example: descriptive text under main title
Feedback item titles	`.feedback-item .item-title`	Titles of individual feedback posts
Feedback item descriptions	`.feedback-item .item-description`	Descriptions under each post title
Feedback tags	`.feedback-item .item-tag`	Colored tags inside posts

2. Buttons & Actions

Element	Selector	Notes
“Create a Post” button	`.main-button a.button-inner`	Main actionable button; can style background, font, padding. Text itself is nested in `.button-text div`.
Vote buttons	`.vote-button.plus`	Upvote/Downvote button next to feedback post

3. Interactive Components / Icons

Element	Selector	Notes
Satisfaction voting icons	`.satisfaction .satisfaction-vote`	Individual voting stars/images.
Menu items	`.main-menu .menu-item`	Top menu items like Changelog, Roadmap, Close.
Dropdown / popover menus	`.popper-menu-item`	Sort/filter pop up menus
Ion icons	`ion-icon`	All icons used throughout the widget.

4.Footer

Element	Selector	Notes
Loader animation	`.app-loader.large`	Spinner shown while loading feedback.
Footer links	`.footer .inner .col.right a` `.footer .inner .col.left a`	“We run on Sleekplan” branding link and "Account Settings"

This method is a workaround . Since it injects CSS directly into the widget iframe, any major updates to Sleekplan’s DOM structure or class names might require you to adjust your custom rules.

That said, it’s a quick and effective way to align the Sleekplan widget’s look and feel with your brand guidelines.

Install the Sleekplan Widget

Customize Appearance

Adding Custom Content Security Policy (CSP) Rules for Your Sleekplan Standalone Website

Injecting Custom CSS into Your Sleekplan Widget