Advanced Styling
Almost every element, section, and page have the editor option to use the Add Style button which in turn provides access to, for example, element specific "targets" as well as additional options for Custom Class, Custom Style and Advanced Styling.
An example of the Add Style options available with the Item Catalog element.
You can add your own custom CSS using the Advanced Styling option.
Using Advanced Styling
Clicking Advanced Styling under the Add Style options will open the Advanced Styling window.
Advanced Styling - By Target
The default tab displayed in the Advanced Styling window is the By target option. This allows you to add your custom styles by selecting targets relevant to the element and then selecting a property for that specific target to be used. Clicking the Add New Style button will add a new line which can then be edited to set the specific target and its relevant property.
Clicking on this definition line will open its specific Edit Style window.
Selecting a Target from its drop-down selector and a Style Name from its drop-down selector will expand the Edit Style window as needed to set that specific combination.
Auctria Pro-Tip from Launch Services!
Clicking the "double-page" icon to the far-right on the style line will duplicate that line allowing for more than one Style Name to be quickly set for the specific Target by editing the duplicate line as needed.
IMPORTANT
To delete a style line click on its red "trash can" icon... no confirmation is required, this is an immediate action!
Advanced Styling - Code
You also have the option of clicking on the Code tab of the Advanced Styling window where you can enter your hand-crafted custom CSS definitions. This tab provides an open text box where you can write your CSS rules and it also includes a drop-down selector relevant to the element being styled allowing you to pre-populate the appropriate CSS container.
Editing Advanced Styling
After adding custom CSS and saving it in the Advanced Styling window the Advanced Styling option will show with an Edit button to re-open the window as needed to add or modify the custom CSS for the element.
Video: Website Editor Add Advanced Styling Rules
In this section:
Last reviewed: February 2023