Project Style (8 min)
Completion requirements
01 Getting Started
This tutorial covers Project Style, including:
- An overview of project styling.
- Combining project and element styling.
- Finding an element in the panel.
- Styling per type.
- Setting styles for individual elements and element groups.
- Using the project style panel.
02 Project Style Overview
The project style panel holds all of the styling properties for your project. You can use this menu to create a unified look and feel for the entire project.
Ensure you use your element styling menu and project styling menu to complement one another. While the project styling menu creates a style that will apply across all project elements, you can use the element styling menu to make changes to a specific element.
Ensure you use your element styling menu and project styling menu to complement one another. While the project styling menu creates a style that will apply across all project elements, you can use the element styling menu to make changes to a specific element.
03 Finding an Element in the Panel
1. Expand the Project dropdown and select Style.
2. Click Configure from the sub-menu.
The project styling is divided into five groups:
The simplest way to find an element in the Customize Styles menu is to click on the element you want to edit while the menu is open. The menu will automatically highlight the element category. You can also search the element type in the search field.
Styling applied in this panel will apply to all elements of the same type across all pages of the project. This applies to elements that you add to the project after the style class has been configured.
Please note that some elements belong to a group while others are individual elements. So if you choose an element that does belong to a group, you can set styles for the group as a whole as well as a specific element in that group. For example, when the Text input field is selected on canvas, the panel will automatically focus on its group (All inputs) allowing you to set common styles that will apply to all of the inputs in this group. If you then wish to apply a certain style to a specific type of input, for example, the Text input, you will be able to do that by selecting this element from the dropdown on the right before you set the styles.
2. Click Configure from the sub-menu.
The project styling is divided into five groups:
- Simple elements - for example, line or input element.
- Complex elements - for example, a table or gallery carousel.
- Project level elements - for example, pages, headers, and confirmation modals.
- ECommerce - for example, catalog or product dialogue.
- Scheduler- this is the styling applied to the scheduler widget.
The simplest way to find an element in the Customize Styles menu is to click on the element you want to edit while the menu is open. The menu will automatically highlight the element category. You can also search the element type in the search field.
Styling applied in this panel will apply to all elements of the same type across all pages of the project. This applies to elements that you add to the project after the style class has been configured.
Please note that some elements belong to a group while others are individual elements. So if you choose an element that does belong to a group, you can set styles for the group as a whole as well as a specific element in that group. For example, when the Text input field is selected on canvas, the panel will automatically focus on its group (All inputs) allowing you to set common styles that will apply to all of the inputs in this group. If you then wish to apply a certain style to a specific type of input, for example, the Text input, you will be able to do that by selecting this element from the dropdown on the right before you set the styles.
04 Styling per Type
Each component of your project is organized into types. You will need to configure the styling for each element type.
For example, all the buttons in the project belong to the same button group whether they are primary or secondary options. To style all the buttons at the same time, use the common tab. To style an individual button, use the button tab.
For example, all the buttons in the project belong to the same button group whether they are primary or secondary options. To style all the buttons at the same time, use the common tab. To style an individual button, use the button tab.
05 Using the Project Style Panel
We recommend that you start customizing your projects using Project Styling, this will ensure a uniform look and feel is applied to your whole project. For example, setting the font style and color.
To make specific elements and fields stand out, use the element styling menu.
To make specific elements and fields stand out, use the element styling menu.
06 Common Use Cases
There are a number of common uses for Project styling. These use cases demonstrate that setting certain project-wide styles can give your project greater uniformity in terms of look and feel:
Setting a font family for the entire project.
Setting the input field group style.
Setting the text type colors and sizes.
Setting the general look of a power table (header style, row style, icons style).
Setting the style of commonly used modals such as information or confirmation modals.