Change the default appearance of components
-
- UpdatedFeb 1, 2024
- 6 minutes to read
- Washington DC
- Building applications
Change the default appearance of components
Set the styles for components and wrappers to change the default appearance.
This video shows you how to perform the following procedure.
Before you begin
Role required: ui_builder_admin
About this task
This task describes how to add styles to components and the wrappers (such as Body, column layouts, or a column) containing components. Customize component styling by selecting the component in the Content tree or apply styles to multiple components by placing components inside a wrapper.
For information about adding styling to your entire experience, see Manage the visual style of UI Builder experiences.
This task applies to the new layout system introduced in Washington DC. If your page is using the old layout system, see Add styling to a component using the old layout system for more information.
Procedure
Add styling to a component using the old layout system
Set CSS styles for a component to change its default appearance.
Before you begin
Role required: ui_builder_admin
About this task
This task describes how to add styles to the wrapper containing your component, which is generally recommended instead of applying styles to the component directly. Make sure that the component whose styles that you want to define is placed within a container component to put the component in a wrapper. Your component's wrapper is one level higher than the component in the Content hierarchy and is labeled by default as Main.
To add styling to an entire page, you can use standards-based CSS in the wrapper for the page. For information about adding styling to your entire experience, see Manage the visual style of UI Builder experiences.
Procedure