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 Application

Log in your project and go to the Design Application.

Screenshot_128-1

 

In this example we are going to make some changes to the existing style of the website. Click the edit button of the homepage layout to go to the Design App.

Screenshot_273

 

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

Screenshot_274

 

Step 2: Change Header 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 button.

Screenshot_275

 

Select the font Lobster  for the Titles & Headers and click any of the green save buttons to save your changes. You should see Headers change to the new font.

Click the return button to return to the style options panel.

Screenshot_277

 

Step 3: Change Content Section 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.

Screenshot_278

 

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

Screenshot_279

 

Change the Background color to Content BG and click any of the green save buttons.

Screenshot_280

 

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 style button next to Tile.

Screenshot_281

 

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

Screenshot_282-1

 

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

(2) Click the save button

(3) Return to the Tile overview panel

Screenshot_283

 

Click Dimensions in the Tile overview panel.

Screenshot_284

 

(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

Screenshot_285

 

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.