> For the complete documentation index, see [llms.txt](https://docs.nosto.com/ugc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nosto.com/ugc/guides/onsite-widgets/styling-waterfall-widget.md).
# Styling Waterfall Widget
* [Overview](#overview)
* [Use the CSS Code Editor](#use-the-code-editor)
* [Layout Structure](#layout-structure)
* [Tile Structure](#tile-structure)
* [Sample](#sample)
* [Helpful Resource](#helpful-resource)
{% hint style="warning" %}
You are reading the **Classic Widget Documentation**
Classic widgets are a previous widget version for onsite widgets created before September 23rd.
From September 23rd 2025, all new widgets created will be NextGen.
Please check your widget version on the **Widget List page** to see if it is **Classic** or **NextGen** widget.
You can read the [NextGen widget documentation here](/ugc/guides/widgets-nextgen/styling-guides.md).
{% endhint %}
## Overview
This article will instruct you on how to custom style a Waterfall Widget using Custom CSS. If you're looking to customise a widget using our Javascript API - you can find the documentation [here](/ugc/api-docs/rest/reference/widgets.md).
## Use the Code Editor
You can use the Code Editor to modify both your Custom CSS and JavaScript. The CSS editor supports [LESS CSS pre-processor](http://lesscss.org). That means you can use both traditional CSS syntax or the better LESS syntax.
### Fork from Nosto's UGC
You can now also click the **fork** link at the top-right corner of each editor pane. This brings the boilerplate code from the Nosto's UGC codebase so that you don't need to write from scratch or copy & paste from our Developer Portal.
## Layout Structure
The below Layout demonstrates the wrappers of our Widget tiles.
|
#### Diagram
|
#### Code
```
...
```
\| | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
### Possible Scenarios
* Changing the background style by setting `body` selector.
* Changing the tile container style by setting `#container` selector.
* Changing the **Load More Data** style by setting `.js-load-more` selector.
* Changing the **AJAX indicator** style by setting `.spinner-overlay` and `.spinner` selectors.
## Tile Structure
The Waterfall widget is mostly composed by tiles - as such it is much easier to customise the Waterfall widget when you are familiar with it's structure.
| Diagram
| Snapshot
|
| --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
### Code
The diagram above only shows until the 4th level. Check the complete Tile structure by referencing the following code.
```
```
## Sample
The following is an example of a customized widget.
```html
```
You can use the following CSS/LESS code as your Custom CSS boilerplate.
```
@import url(https://fonts.googleapis.com/css?family=Lato);
html, body {
background: #000;
}
.js-load-more {
background: rgba(51, 102, 153, 0.8);
border-radius: 4px 4px 0 0;
bottom: 0;
display: inline-block;
font-size: 12px;
font-weight: bold;
left: ~"calc(50% - 68px)";
position: absolute;
text-transform: uppercase;
transition: background 1s linear;
&:hover {
background: #0198cf;
}
}
.tile {
border: none;
border-radius: 4px;
&-content {
margin: 0;
}
&-image-wrapper {
margin-bottom: -60px;
&:after {
background: rgba(255, 255, 255, 0.2);
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
transition: background 0.3s linear;
}
&:hover {
&:after {
background: rgba(255, 255, 255, 0);
}
}
}
&-image {
border-radius: 4px 4px 0 0;
}
&-avatar-wrapper {
top: 14px;
position: relative;
}
&-belt {
background-color: #eee;
padding: 15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
&-tags {
padding: 0 15px;
}
&-caption {
font-family: 'Raleway', sans-serif;
font-size: 18px !important;
line-height: 1.5;
padding: 0 15px;
}
&-twitter-intent {
padding-bottom: 15px;
}
}
```
## Helpful Resource
You can download a layered PSD to demonstrate our widget [here](https://github.com/Stackla/docs/blob/master/docs/media/guides/assets/20/stackla-waterfall-wireframe-2016.psd.zip).