Key Topics: Advanced Styling

Video: Website Editor Add Advanced Styling Rules

Auctria Video January 2020

Almost every element, section, and page has 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.

img

An example of the Add Style options available with the Item Catalog element.

You can add custom CSS using the Advanced Styling option.

Using Advanced Styling

Clicking Advanced Styling under the Add Style options will open the Advanced Styling window.

img

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 selecting a property for that specific target. Clicking the Add New Style button will add a new line, which can then be edited to set the particular target and its relevant property.

img

Clicking on this definition line will open its specific Edit Style window.

img

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 of the style line duplicates that line, allowing more than one Style Name to be quickly set for the specific Target by editing the duplicate line as needed.

To delete a style line, click on its red "trash can" icon. NOTE: 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 to 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.

img

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 to add or modify the custom CSS for the element.

img


Last reviewed: February 2023
AddStyle_AdvancedStyling
/key_topics/websites/advanced_styling/
key_topics
websites
advanced_styling
Key Topics: Advanced Styling