Custom Styling

Overview

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.

"scopedSettings": [
    {
      "settings": {
        "styling": {
          "url": "",
          "css": ""
        }
      }
    }
],

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.

Custom CSS

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

Custom Breakpoints

The admins are now able to configure their own breakpoints for the Intranet Hub Landing Page. This is done by introducing a node called "breakpoints" in the root node of the JSON config. The admin needs to configure a width size for each number of columns. The sizes are the minimum width required for each of the layouts. So for a minimum of 1620px the page layout will be a 4 column layout. For a minimum of 1180px the page layout will be a 3 column layout.

Here is a configuration example:

"breakpoints": {
"1": 320,
"2": 790,
"3": 1180,
"4": 1620
}