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.

 

 

Pro Tip: Best practice when doing your website styling is to start with the General Stylesheet to set your defaults, then, do adjustments on a component level. When necessary on instance level, only when specifically required.

 

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.

 

style your website


1. Select global Stylesheet in the second navigation bar.


style your website (2)


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.

 

style your website (3)


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.


style your website (4)


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.