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.
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. 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.
