---
title: "Custom CSS"
date: 2018-09-05
author: "nK"
---

# Custom CSS

**Block settings → Custom CSS.** Styles you write here apply to this block only.

![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-15-at-21.36.48-1024x583.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-15-at-21.36.48-1024x583.png)    Write rules against the word `selector`. It is replaced on output by a class that is unique to this block, so the same rule can be pasted into another block without collisions.

```
selector .vp-portfolio__item {
    background-color: #f0f0f0;
}
```

## Useful selectors

SelectorWhat it matches`selector`The block wrapper`selector .vp-portfolio__items`The list of items`selector .vp-portfolio__item`One item`selector .vp-portfolio__item-img`The item image wrapper`selector .vp-portfolio__item-overlay`The overlay of the Fade, Fly, Emerge and Caption Move skins`selector .vp-portfolio__item-caption`The caption of the Classic and Emerge skins`selector .vp-filter`The filter`selector .vp-sort`The sort`selector .vp-search`The search (**Pro**)`selector .vp-pagination`The paginationClick **Open in Modal** for a larger editor. The modal shows a **Classes Tree** with every class the current block renders, so you can pick selectors without the browser inspector. For anything not listed, use the browser’s inspector on the published page.

## Notes

- HTML is not allowed in the field and is removed on save.
- Skins expose CSS variables you can override here as well. See [CSS Variables](https://staging.visualportfolio.com/docs/developers/css-variables/).
- The block has no “Additional CSS class(es)” field. Use the **HTML anchor** field in the Advanced panel if you need an ID.