How to style your website?

The SiteManager platform allows three levels of website styling: global stylesheets, component styling and instance styling. Learn how to style your website in the most efficient way!

If you want to learn how to style your website, watch the video above or follow the steps below.

Global Stylesheet

This is where you’ll be able to set your style foundation and default styling.
The global stylesheet will act as a master when you build new components or add components from the libraries.

1. Select global Stylesheet in the second navigation bar.

2. Click the elements to adjust styling on your global stylesheet. You can adjust styling for headers, content, links, buttons, menu, icons, images, lines, quotes, cards and tiles.

Component styling

It's possible to make style adjustments on component level.

3. To do this, navigate to a page and hover over a component that you want to style.
In this case, we will modify the header 2 styling of the component content & Image. Click on the header selector.

4. Navigate to the side panel. Click text properties, and text decoration. Let’s say we want to underline the header.

In just a few clicks you now changed the header 2 default styling for this specific component. These changes will effect everywhere on the website where this component is used.

Instance styling

The last level of website styling is on instance level. With an instance style change you adjust styling on one specific part of your website, without impacting anything else. 
To do this, you would create an instance.

5. Click create Instance. Now, if I’d like this title to display in green only in this one location, I can do that.

6. Select header, text properties, font color and select green.