How to Use

Once the code snippet tile has been placed onto the page, you will be able to open up the code snippet tile and start placing custom code into the snippet tile. In order for tile to be able to read in Javascript and CSS, you will need to be place in the <script> and <style> tags for Javascript and CSS respectively.

Settings

Tile

Code – Canvas in which the html code can be added to.
Sandbox Mode – When enabled this embeds the custom html code in an iframe.
Width – Adjusts the width of the tile, in pixels.
Height – Adjusts the height of the tile, in pixels.
Background Color – Changes the background color of the tile using the color picker.

Layout

Layer – Changes the depth of the tiles within the page. Selectable via drop-down either Foreground, Background or Custom.
Reorder Within Layer - Changes the depth of the tiles within the layer. Selectable via drop-down either ‘No Change’, ‘Bring to Front’ or ‘Send to Back’.

Advanced

Tile Visibility – Changes which groups can or cannot view the tile. Selectable via dropdown either Everyone, ‘Only for’ or ‘For everyone except’. When ‘Only for’ or ‘For everyone except’ is selected, a dropdown menu will appear where you can assign groups to the category that was selected.
Lock Tile for Non-owners – Toggles whether only tile can be only modified by an owner.
Custom CSS Classes: This section allows you to add multiple Custom CSS classes to the product, allowing you to be able to add custom CSS classes to the tile.

Developer Notes

As long as the tile is loaded with "Sandbox Mode" unchecked, it is possible to access the various libraries loaded on the page. This include jQuery via the $ variable. Through this means, it's possible for developer to implement solutions that use DOM manipulation, animation, and even AJAX calls. Obviously, LiveTiles is NOT responsible for any modifications made via Code Snippet tiles and encourage the following best practices:

Do NOT modify any DOM elements not contain within HTML in the code snippets tile itself with either CSS or JavaScript

If you choose to modify outside DOM elements, especially via custom CSS, keep in mind that LiveTiles may change the HTML structure of other elements in the future as part of the natural evolution of the product and this may break your customization

A gallery of Code Snippet examples are available on the LiveTiles GitHub page, offering a free resource for learning more about what is possible with the Code Snippet tile

Did this answer your question?