# Styling Widget Expanded Tile
* [Overview](#overview)
* [Use the CSS Code Editor](#use-the-css-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](https://docs.nosto.com/ugc/guides/widgets-nextgen/styling-guides).
{% endhint %}
## Overview
This article will instruct you on how to custom style the Expanded Tile for our Widgets 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 CSS Code Editor
You can use the CSS Code Editor to modify your Widget Expanded Tile CSS. It supports [LESS CSS pre-processor](http://lesscss.org). That means you can use both traditional CSS syntax or the better LESS syntax.
### Tips
The Expanded Tile actually exists in the parent page instead of Visual UGC's iframe. That means you can write custom CSS in your own page rather than in our Code Editor. However, we recommend that you use our editor for ease of management.
## Container Structure
The below diagram demonstrates the container of our Widget Expanded Tile. It contains the required HTML elements for the background mask and tile centerizing.
| Diagram
|
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Snapshot
|
### Possible Scenarios
* Changing the mask style by setting `.stacklapopup-bg` selector.
* Changing the maximum width of Expanded Tile by setting `.stacklapopup-content-wrap` selector.
* Changing the close button style by setting `.stacklapopup-close` selector.
### Tips
#### Reset
You can break the Expanded Tile styling when you set rules for common tags such as `div` or `span`. To avoid this, you can manually apply the following CSS rules:
```
.stacklapopup-wrap * {
margin: 0;
padding: 0;
}
```
#### z-index
You may have some overlays with z-index values in your page. To display these correctly you may need to overwrite the default z-index values.
```
.stacklapopup-bg {
z-index: 1042; /* Default value */
}
.stacklapopup-wrap {
z-index: 1043; /* Default value */
}
```
## Tile Structure
The Expanded Tile has two different layouts which are **Portrait** and **Landscape**.
### Portrait
| Diagram
| Snapshot
|
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
### Landscape
Landscape has more HTML elements than Portrait for layout purpose. They are `.stacklapopup-panel`, `.stacklapopup-panel-left` and `.stacklapopup-panel-right`. All the inner blocks share the same structure as the Portrait layout.
| Diagram
|
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Snapshot
|
### Code
The diagrams above only show up to the 4th level. Check the complete Expanded Tile structure by referencing the following code.
```
```
## Sample
The following is an example of a customized Expanded Tile.
\
\ You can use the following CSS/LESS code as your Custom CSS boilerplate
```
@import url(https://fonts.googleapis.com/css?family=Satisfy);
.stacklapopup {
/* Mask */
&-bg {
background: #fff;
opacity: 0.5;
}
&-content-wrap {
border-radius: 10px;
border: solid 1px #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
&-user-info-wrapper {
background: #eee;
border-radius: 10px 10px 0 0;
color: #333;
display: block;
margin-bottom: 0;
padding: 10px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}
&-caption {
font-family: 'Satisfy', cursive;
font-size: 36px;
}
&-tags {
font-size: 14px;
font-weight: bold;
}
&-interactions {
margin: 0 10px;
}
&-footer {
background: #eee;
border-radius: 0 0 10px 10px;
color: #333;
padding: 10px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}
&-timestamp {
font-weight: bold;
}
&-preloader {
display: none;
}
}
/* Overwrite some special rules from Portrait layout */
.stacklapopup-portrait {
&.stacklapopup-content-wrap {
padding: 0;
}
.stacklapopup-image-wrapper,
.stacklapopup-video-wrapper {
margin: 0;
}
}
```
## Helpful Resource
You can download a layered PSD to demonstrate our Expanded Tile layout [here](https://github.com/Stackla/docs/blob/master/wp-content/uploads/2017/12/stackla-lightbox-wireframe-2016.psd.zip).