Mission 2: Style Component

Briefing

Today we are going to use the Design Application to style the "blockquote" component we added to the homepage in mission 1. The Design application enables you to create website layouts and style content fast and easy. As content users don't have access to the Design application your branding and design stay consistent throughout the project.

Step 1: Design Application

In the upper right menu click the Design Application button. If you don't see the button make sure design and developer rights are enabled for your account.

 

Screenshot_128-1

 

In the Design application scroll to website layouts and click the edit button for the homepage layout. This is the layout attached to the homepage where we added the blockquote component.

 

Screenshot_226-1

 

The Design editor opens with the homepage layout in placeholder mode. To switch to the home content render you click the layout selector on top of the browser preview (1). Select Home (2) to render the content that includes the blockquote component.

 

Screenshot_227-1

Screenshot_228

Tip: if you want to open the design editor directly from the CMS application you can also click the design button next to  the page selector. You will directly go to the design editor of the page you are currently on (see picture below). You can repeat this to return to the CMS application as well.

 

Screenshot_229-1

 

Step 2: Blockquote Styling

When the home content has rendered in the design editor select the blockquote. When you hover over it you will notice 2 paintbrush icons appear. These are the buttons to style the blockquote component. The left darker button will style the component (.class) and the changes will affect all current and future installments of the blockquote component on any page of your project. 

When you want to style the component (#ID) for this instance only and not affect the general style of the component you need to click the right  lighter button. This will create a style instance for the component. Making an instance of a component in irreversible. 

In this example click the left darker style button  as we are going to make some changes to the general style of the blockquote component.

 

Screenshot_230

 

Step 3: Text Styling (Blockquote)

After clicking on the dark style button in step 2 a new menu with styling options will appear on the left. Click on the  Text button.

 

Screenshot_231

 

A new panel will appear with all properties switched to the OFF position. We are going to make some changes to the following styling options: font family (1), font size (2), font style (3) and text align (4).

 

Screenshot_232-1

 

1) Switch the Font Family to ON. Select Raleway in the font list and click the green save button above it. Make sure the blockquote is visible in the render preview and you will see the font change in real-time.

2) Switch the Font Size to ON. Set the font size to 36 and select Pixels as type (default). Click the green save button.

3) Switch the Font Style to ON. Select Italic as type and click the green save button.

4) Switch the Text Align property to ON. Select Center and click the green save button.

Tip: you can make all 4 changes without hitting the green save button each time. But before you leave the style panel you need to click any green save button for the changes to take affect.

 

Step 4: Mobile Styling (Blockquote Text)

With the design editor you can change any style property for mobile, tablets and large desktop screens.

In the text panel click on the mobile button in the Font Size property. You can also set the render in mobile view by clicking the mobile icon on the top right corner of the preview window. In mobile view scroll to your component you are editing.

 

Screenshot_233-1

 

In mobile view set the font size to 24 pixels. You will see the result change in real time in the mobile render. Press any green save button to save your changes before switching back to another screen size. When you want to return to the browser view you can click the screen icon on the top right of your page.

After saving we can click the return button (arrow icon) to return to the styling options of the blockquote.

 

Screenshot_234

 

Step 5: Background Styling (Blockquote)

In the styling options menu for the blockquote component click the Background button.

Note: As a visual reminder to show you that the text styling panel has properties that are activated (switched to ON) you see an exclamation icon next to the button.

 

Screenshot_236

 

Switch the Background Color to ON and select Color 4 from the color palette list.  Click the green save button. Then click the return button.

 

Screenshot_237

 

Step 6: Border Styling (Blockquote)

In the styling options menu for the blockquote component click the Border button (1).

 

Screenshot_238-1

 

Switch the Border Left to ON. Set the border thickness to 4, border type to solid border and pick color 3 from the color palette list. Click the green save button. Then click the return button.

 

Screenshot_239-1

 

Step 7 : Style Dimensions (Blockquote)

In the styling options menu for the blockquote component click the Dimensions button.

With dimensions you can change the width, height, margin and padding of the selected component.

 

Screenshot_240

 

Switch the Margin (pixels) to ON . Set the Bottom to 20 and the other dimensions to 0. Click the green save button.

You can now return to the CMS editor to publish your project by clicking the Home icon as shown in the picture below.

 

Screenshot_241-1

 

Debriefing

Good job! We hope you are enjoying these tutorial missions if you have any questions you can always contact us at support@sitemanager.io. If you like to learn more about the Design application you can always watch our Youtube playlist where we give you a full overview.

For our next mission we are going to take a first look at the Developer application, the heart of the SiteManager platform. Don't worry if you are not a developer we will have a beginner-friendly version of the assignment ready for you.