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.
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.
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)
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.
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.
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.
In the content section style panel click on the Background button.
Change the Background color to Content BG and click any of the green save buttons.
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.
In the overview style panel for Tile click the 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.