Can I customize my widget CSS?

Customize your widget CSS

You want to use custom CSS to customize your widget.

With Senja, it’s easy!

Here’s how to add custom CSS:

First, head to Senja 💟

Then…

1. Click on Studio

2. Click on the widget you want to edit.

Here I am picking from Recently Saved.

3. Click on Design

This located on the right side-bar menu

4. Click on Advanced

This is the gear icon

5. Click on Custom CSS

Add your custom CSS here

6. Click on Save changes

Your custom CSS has been added

CSS Repository

While don’t have that at this time, here are a few easy steps to find element class attributes:

1. Right-click on the webpage and select "Inspect" to open Chrome DevTools.
2. Click the "Select an element on the page to inspect it" button (a cursor icon in the top-left corner of DevTools), then click the element you want to style on the webpage.
3. In the Elements tab, look at the HTML code for the selected element and check the class attribute. If a class starts with sj-, copy it.
4. If the selected element doesn’t have a class starting with sj-, check its parent elements for a class starting with sj-. Copy that class instead.
5. In the widget editor, use the copied class to write your custom CSS. If necessary, add !important to ensure your styles take precedence.