Description


This article gives you step-by-step instructions on how to add and utilize custom classes in LiveTiles Design.


customcss.PNG

The Advanced Tab


How to use


To use Custom CSS classes, you will need to type in a CSS class into the tile/row/page you would like to modify using CSS. You can find this under the Advanced tab in the row or tile settings, or under Custom Code in the page settings.

NOTE: You will get a pop-up error if you prefix your code with lt- or ltd- as these denote key classes used by LiveTiles to apply needed styles to the product.

Once you have applied a class to your tile, you will then be able to reference it in one of two ways:

1) Using the code snippet tile to apply styles directly to the page. The advantage of this method is that you will be able to see the style changes that you make instantly without needing to save and go to the page.
2) Using a stylesheet and then referencing it in the document head. This method has the advantage of being able to use common CSS classes across multiple pages without needing to recopy the entire code each time.

An example of how this can be applied to LiveTiles pages is the ability to give your tiles a flexible height as demonstrated by the code below:

<style>
.flexible {
height: auto!important;
}
.flexible .lt-tile-container{
position: inherit;
}
</style>


By adding a CSS class called flexible to the tile, the above code, when referenced, will create a tile that is flexible in height.