# Styling Carousel Widget
{% 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](https://docs.nosto.com/ugc/guides/widgets-nextgen/styling-guides).
{% endhint %}
* [Overview](#overview)
* [Use the Code Editor](#use-the-code-editor)
* [Layout Structure](#layout-structure)
* [Tile Structure](#tile-structure)
* [Sample](#sample)
## Overview
This article will instruct you on how to custom style a Carousel Widget using Custom CSS. If you're looking to customise a widget using our Javascript API - you can find the documentation [here](https://docs.nosto.com/ugc/api-docs/rest/reference/widgets).
## 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 **AJAX indicator** style by setting `.spinner-overlay` and `.spinner` selectors.
* Changing the **Scroll bars** style by setting `.ps-scrollbar*` selectors.
* Changing the **Prev/Next Nav Arrow** style by setting `.track-controller` selectors.
## Tile Structure
The Carousel widget is mostly composed by tiles - as such it is much easier to customize the Carousel 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.
```less
@import url(https://fonts.googleapis.com/css?family=Lato);
html, body {
background: #000;
}
body {
padding: 0;
margin: 5px 0;
}
.tile {
border: none;
border-radius: 4px;
margin-left: 5px;
margin-bottom: 10px;
padding-left: 0;
padding-right: 0;
&-image {
border-radius: 4px 4px 0 0;
}
&-avatar-wrapper {
top: 6px;
position: relative;
}
&-belt {
background-color: #eee;
border-radius: 0 0 4px 4px;
margin-top: -20px;
padding: 25px 15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
&-caption {
border-radius: 0 0 4px 4px;
font-family: 'Raleway', sans-serif;
font-size: 18px !important;
line-height: 1.5;
padding: 0 15px;
}
&-details {
.image &,
.video & {
height: 0;
overflow: hidden;
padding: 0;
top: auto;
bottom: 111px;
transition: height .3s ease-in,
padding .4s linear,
opacity .6s linear;
}
.image:hover &,
.video:hover & {
padding: 20px;
height: 306px;
}
}
}
.track-controller{
color: #ffffff;
background-color: #000000;
border-radius: 0;
opacity: 0.5;
transition: opacity .3s ease;
&:hover{
opacity: 1;
}
&.prev{
left: 0;
}
&.next{
right: 0;
}
}
```