# Custom CSS

> Use custom CSS classes to make small design tweaks to Cevoid widgets.

Breadcrumb: Widget › Custom CSS · Updated: 2026-10-17
Docs index: https://docs.cevoid.com/developers/llms.txt

Use this page when you need small CSS touch-ups for Cevoid widgets. Cevoid widgets are mainly styled through the platform, and most design needs can be handled in your widget settings.

Every element in Cevoid widgets has a CSS class attached to it. These classes are prefixed with `.cevoid-*`.

## Find widget classes

Use your browser's developer tools to explore the classes available on a live widget.

1. Open a page where your Cevoid widget is embedded.
2. Right-click the element you want to style.
3. Select **Inspect** (or **Inspect Element**) to open developer tools.
4. In the Elements panel, look for class names that start with `cevoid-` on the selected element and its parent elements.

> [!TIP]
> Open a popup or expand a gallery post before inspecting if you want to style elements that only appear after interaction.

## Override widget styles

Add CSS for Cevoid widget classes in your site's CSS file to override the default widget styles. You may need `!important` when Cevoid's built-in styles are more specific than your site CSS.

### Hide post captions in the popup

```css
.cevoid-caption {
  display: none !important;
}
```

This hides the captions of posts in the popup on both desktop and mobile.

### Hide products in popup

```css
.cevoid-products-wrapper {
  display: none !important;
}
```

> [!NOTE]
> Class names can differ between widget types (galleries, cards, popups, and loyalty widgets). Always inspect the element on your page to confirm the exact class before adding CSS.

---

Canonical: https://docs.cevoid.com/developers/widget/custom-css