The LiveTiles Intranet Hub supports custom styling with your own CSS so that everything will look exactly how it should in order to best fit your needs.
You are provided with the option to load global styles from CSS files hosted on your CDN of choice or to insert the CSS directly in the JSON editor. Moreover, the global styles can be applied on all pages where the Hub app is present or they could be configured to be applied only to certain pages where it makes sense.
There is also the option to go more granular and apply some styles only to a single widget, without the risk of impacting the other HTML elements outside that widget.
The most important HTML elements from The LiveTiles Intranet Hub have class names applied to them and they are all prefixed with
lthub-. This way you can easily target the precise element that you wish to style.
Applying global styles
As mentioned above, global styles can be applied to all or only some pages. This could be configured in the global config via the JSON editor on the Scoped Settings property. For more details on how to use the scoping functionality, see the SharePoint Integration page.
The scoped styling accepts expression strings for both the
url and the
css property. This means that they can be configured dynamically for increased flexibility.
Loading custom CSS files
In order to load custom CSS files, you need to specify the absolute URL (or an expression that returns the absolute URL) of the file that you want to load. You can load more than one file. To do so, just add the URLs in an array.
If loading a hosted CSS file is not a suitable option, you can configure the global CSS directly inside the Hub config on the
css property of the scoped styling property. LiveTiles Intranet Hub uses styled-components 💅 for styling. The global CSS that you configure will be injected using this tool. What this means is that you can use the same syntax that styled-components accepts when writing your custom styles.
Similar to URLs, more than one expression string that contains CSS can be configured.
Styling a single widget
All widgets that implement the IWebPartConfig interface can by styled using the
css property where you can use the CSS syntax accepted by styled-components. You can rest assured that the styles you are configuring will not be leaking to elements outside of the widget you are configuring as they are applied only to the widget itself and its child elements