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.
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.
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)
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.
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).
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.
In the content section style panel click on the Background button.
Change the Background color to Content BG (1) and click any of the save buttons (2).
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.
In the overview style panel for Tile click the green Background button.
(1) Open the Background Color option and select Color 5
(2) Click the save button
(3) Return to the Tile overview panel
Click Dimensions in the Tile overview panel.
(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
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 firstname.lastname@example.org.