Customizing the Mosaic Event Screen to Have 9 Even Tiles
Was this helpful?
Was this helpful?
This is an extended guide for the tutorial. If you are not familiar with our Mosaic Event Screens, we suggest you start there first as some of those details will come in handy.
This section demonstrates how to create a layout of 9 even tiles for the Mosaic Event Screen. The following image is a snapshot of the result:
The following is the default Grid Layout.
To update the Grid Layout structure, we need to update the stylesheet. As you can see, all the cells should have 33.33% for both width and height.
Previously there are 10 cells. However, in the new layout, you can only have 9. The only way to achieve this is by hiding the 10th tile with display: none;. That's probably not so good if you want to display all tiles.
Let's implement the new layout!
You need to overwrite the stylesheet for both the cell dimension and the cell position. Place the following stylesheet into your Custom CSS editor to display the new layout.
To create gaps between tiles you can use the following CSS example.
Click the following image to see the Event in your browser.
In the previous tutorial, we mentioned the , which details how an Event Screen can have a different visual effect after each transition.
