# 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).
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.nosto.com/ugc/guides/onsite-widgets/styling-waterfall-widget.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.