Written by: Trey Miller
There are many tiles for various different purposes, but what if you need something specific? Well, you’re in luck. LiveTiles Design offers the Code Snippet Tile, which allows page designers to create their own custom tiles.
You may be wondering, “How does it work?” The Code Snippet Tile embeds the entered code directly onto the page where the tile is. As a result, you can input any valid HTML, and it will end up embedded in the page inside the Tile’s div. You can even add a script tag to add your own JavaScript, or a style tag for CSS—although, to be honest, using the Custom Head Code section in the Page Settings would be a better place for the CSS style blocks.
When you add a Code Snippet Tile to the page, you will see it animate some letters on the screen, one at time. You’ll end up with something like this:
This creates a simple HTML structure with an h1 element and a p element, and a script tag with some JavaScript that does the letter-appearing animation. When you open the tile settings, as displayed in the screenshot below, you will see the code used for this in the Code section. This is where you can customize your own tile.
You should also make note of the Sandbox Mode option. This will embed the code into the body of an iframe, isolating it from the rest of the page. Sometimes you might prefer this option, especially if you are using JavaScript libraries that conflict with LiveTiles code or imported libraries. Other relevant options such as width, height and background color allow you to customize the outer container of the tile.
While you can input custom code into the Page Settings to add custom CSS and JavaScript, the Code Snippet Tile allows you to choose exactly where on the page it will show up, which is perfect for custom HTML. Ultimately, the best practice would be to use the Page Settings for custom CSS and JavaScript, and the Code Snippet Tile to add your custom HTML anywhere on the page.
LiveTiles Design has many tiles with specific forms and functions. The Code Snippet Tile takes customization a step further; it allows users to completely create personalized tiles with a user-friendly approach. LiveTiles Design produces results that designers all over the world envy.
