Conditional styles allow you to modify the style of a box based on specific conditions, such as when a visitor hovers over it or when the box appears on the screen. These conditional styles can be broadly categorized into the following groups:

Select a box and open "Conditional Style" in the upper right corner of the editor. Then, click on the condition you want to modify, to enter the conditional style editing mode.

You can exit this editing mode by selecting a different box or clicking the condition again.

To remove conditional styles, click the "×" icon in the top right corner of a settings field. You can also reset all conditional styles by clicking the "×" icon next to the condition.

Hover is a conditional style that is applied to a box when the user moves the cursor over it. It is typically used to indicate to the visitor which elements are clickable.

"(in)Hover" is used to apply additional styles to a box nested inside another box, which has the "hover" property set. This allows for expressions such as "changing only the color of the arrow inside a button when hovered".

Note that you cannot set "(in)Hover" styles unless you have set some form of hover styles on the outer (”parent”) box.

Focused is a conditional style that is applied to input fields or options of a form when the user inputs in the field or makes a selection.

This applies not only to cursor interactions but also to keyboard operations and selections made with speech input software.

Pressed is a conditional style that is applied to a form submit button while the visitor is clicking on it.

Closed is a conditional style that can only be applied to the "Toggle Box," which allows for opening or closing of the content part when clicked or hovered over.

The Toggle box has two components: a button and a content part. When a visitor clicks or hovers over the button, the content part opens or closes accordingly.

The visual style for the content part in its closed state is defined using the "Closed" conditional style.

Current page is a conditional style that is applied to a box with an internal link.

The box style changes only when the link destination and the current page match. This visually indicates to the visitor, "You are currently viewing the page linked to.”

When the “include child page” setting is on, the style also changes when viewing the lower level page of the link destination.

For instance, if you set “include child page” to the box with a page link destination to /company, the style also applies when the visitor is viewing the /company/about page.

Appear is a conditional style that is applied to a box just before the box appears in the browser window due to page loading or scrolling.

For instance, to create a fade-in animation effect, you can set the opacity to 0 (transparent) under the “Appear” condition, and then change the opacity to 1 (opaque) when the condition is not applied.

First item is a conditional style that is available to the first item in a CMS list or manually listed boxes.

It is useful when you want to make the latest blog post stand out.

Custom is a conditional style that is available when boolean properties are set to CMS lists or dynamic pages.

This allows you to set the style for when the corresponding boolean value is turned on (true).

For more information on boolean value properties, please refer here: Property | STUDIO U