> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cevoid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

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

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.
</Tip>

## 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 theme={"theme":{"light":"github-light","dark":"github-dark"}}
.cevoid-caption {
  display: none !important;
}
```

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

### Hide products in popup

```css theme={"theme":{"light":"github-light","dark":"github-dark"}}
.cevoid-products-wrapper {
  display: none !important;
}
```

<Note>
  Class names can differ between widget types (galleries, cards, popups, and program widgets). Always inspect the element on your page to confirm the exact class before adding CSS.
</Note>