This week’s product release will excite users, as it’s been a popular request from many of you! You now have the ability to add Custom Class on all tiles, rows and pages. So for all you jedi designers out there, you can now go to town adding even more custom code.
We’ve also added two new improvements and have done our exterminator duties, so your LiveTiles experience is as clear and crisp as the November air. For all the details, read on down.
New feature: Ability to add Custom Class on all tiles, rows and pages
A very common request is for us to provide more ways to change or manipulate Tiles on a page programmatically. As a part of our plans for this area, we have introduced unique CSS class identifiers for all tiles, responsive page rows and pages.
You can now add your own class to these elements allowing them to be referenced in your custom code.
Adding a Class to a tile is done via the Advanced tab on the Tile Settings window:
Adding a Class to a responsive page row is done under the Advanced tab in the Row Settings:
Adding Class to a page can be found at the bottom of the custom code section in Page Settings:
Note: You cannot use the prefixes lt- or ltd-. Doing so will result in a message being displayed on submitting the settings.
Using your classes
Referencing custom classes can be achieved in two ways:
- Reference your own CSS file in the Page Head using Custom code under Page Settings.This has the advantage of allowing you to use a common CSS file across multiple pages.Note: code referenced in the Head does not execute in the design canvas so you will not see your custom styling.
- In-line on the page using a code tile. This has the advantage of being able to view your changes in the design canvas.
Note: Using this method will mean you will need to put your code in <style></style> tags in the code tile, and if the code is needed to be used across multiple pages, you will need to recopy the code to a code tile or save a copy of the code tile and add it on each page you would like to use the code for.
Also, don’t forget to turn off Sandbox mode on the code tile, as your code needs to interact with the page.
Example Usage
Some ideas for some things you can achieve with this new capability are:
- Set flexible height for a tile where the class “flexible” has been added to the tile:
<style>
.flexible {
height: auto!important;
}
.flexible .lt-tile-container{
position: inherit;
}
</style>
- Set a background image on a responsive page row. In this case we will set it as a black to white gradient:
<style>
.image {
background: linear-gradient(black, white)!important;
}
</style>
- At the page level, set different background colors or images for different sections of your Intranet or user groups.
We look forward to seeing what our customers and partners come up with! You can share exciting new custom code additions via the Yammer community you belong to.
Improvements
|
Frameless Modal Dialog is responsive & resizable |
In order to keep modal windows easier to use across devices, we have improved the modal window so that it is resizable, should the page become smaller than the size of the modal window.
Note: This is currently only being applied to the Frameless dialog window at this time. |
| Text tile CKeditor – Expose source code item | In order to improve the Text tile and provide for granular control of the text, we have introduced the ability to expose the source code from the text toolbar. |
Bug fixes
| Media upload – Cannot upload size greater than 2mb | You will now be able to upload files greater than 2mb in size. |
| Responsive – Deleting via delete key immediately after dropping a tile deletes row | Pressing the delete key after dropping a tile onto a row now only deletes the relevant item. |
| Responsive canvas – Lists in rows with row size differences causes blank lists when resizing | Resizing rows with different views now do not cause blank lists. |
| Documents tile padding – Padding does not apply to tile | Padding now applies to the Documents tile. |
| Responsive – Firefox: when deleting a tile the row properties dialog box opens | Deleting a row in Firefox now does not cause the properties dialog box to open. |
