Mission 5: Change general styling

Briefing

Every website has a general style sheet with some common elements (buttons, titles, etc...). Changes made to this styling affect the entire website. It's very handy for rebranding or making changes on a high level.

The general styling for an individual design elements or page components can be overwritten using it's own style panels.

Step 1: Design Editor

Log in your project and go to the design application.

1 design button-1

You can overwrite your existing style with a new style (1). We are not going to do that in this mission. In this example we are going to make some changes to the existing style of the website. Click the edit button of the content layout (2) to go to the design editor.

2 select layout

You always enter the Design editor in placeholder view with the general style elements rendered in the chosen layout. To change the general style of your website simply click the green style button next to the layout name or click the green style button next to Website Style in the preview render. (see pic below)

3 website style

Step 2: Change Logo Font Family

As you can see there are many elements you can change in the general style sheet of your project.

We start by clicking the Set Fonts option.

4 set fonts

Select the font Lobster (1) for the Site Title and click any of the green save buttons (2) to save your changes. You should see the logo title change to the new font.

Cllick the arrow return button to return to the style options panel (3).

5 font lobster

Step 3: Change Content Background

(1) You can go to the Content Section by cliking the button in the panel or clicking the green style button next to Page Content.

6 content selection

In the content section style panel click on the Background button.

7 content background

Change the Background color to Content BG (1) and click any of the save buttons (2).

8 content BG

Step 4: Change Tile (Background, Dimensions)

There are some elements that can be styled on a high level by the general style panels. Some of these elements are header titles, dividers, blockquote and buttons. In this example we are going to change the general styling of the tile component.

Return to the general style home panel (click Tile) or scroll down in the preview window and click the green style button next to Tile.

9 tile panel

In the overview style panel for Tile click the green Background button.

10 tile options

(1) Open the Background Color option and select Color 5

(2) Click the save button

(3) Return to the Tile overview panel

11 tile background

Click Dimensions in the Tile overview panel.

12a tile options

(1) Activate the padding panel by turning the switch on

(2) Set Top, Bottom, Left and Right padding to 20.

(3) Click the save button

12 tile dimensions

Debriefing

You don't have to save the layout to see the changes made to the general styling of your website. Simply publish the website (or go to the content editor) and check out the result.

You have already learned to style a page component and change the general stylesheet of the website. In the next mission we will make some style changes to a layout element.

As always if you have any questions do not hesitate to contact us at support@sitemanager.io.