Style A Block In The Web Editor

This guide explains how to use Styling inside the Admin Web Editor.

Use it when you want to:

• change how a selected block looks
• adjust spacing, layout, typography, or colors
• quickly recover when a block's styling becomes messy
• work through grouped style controls one area at a time
• refine the appearance of one block before previewing the page

Before You Start

Open the Web Editor from System > Platform Customization.

Then open a page and select the block you want to style from the canvas or the Outline panel.

After that, use the right-side panel and open Styling.

What The Styling Panel Is For

The Styling panel is where you control the visual presentation of the selected block.

Use it after the block content is already correct and the remaining work is visual improvement.

This is the right place for one-block design changes such as:

• spacing
• layout
• typography
• color
• other visual settings

Use Styling After Content Is Ready

A good working order is:

• update text, labels, and block options first in Block Settings
• move to Styling after the block content is already correct
• change one style group at a time
• check the result on the canvas before moving to the next group

What You Can Find In The Styling Panel

Depending on the selected block, the Styling area can include:

• a styling target or header area showing which selection you are editing
• a style properties header
• grouped style sections shown in an accordion
• optional layout-child controls for blocks that work inside flex or grid layouts

These sections help you focus on one visual area at a time.

Expand Or Collapse Style Groups

The style sections can open and close like an accordion.

Use this when you want to focus on one kind of visual setting without scrolling through every control at once.

This makes styling easier when a block has many available options.

Adjust Style Values

Use the available style controls to change the appearance of the selected block.

Depending on the block, these controls can affect things such as:

• spacing around the block
• layout behavior
• text appearance
• colors

As you update the values, OpenMirai reflects the styling changes in the selected block.

Use Layout-Child Controls When Available

Some blocks can show extra layout-child sections.

These are useful when the selected block is part of a flex or grid layout and needs child-level adjustments.

If these controls appear, they are there because the current block supports that kind of layout behavior.

Use Drag-Based Numeric Adjustments

For some style values, OpenMirai can support drag-based numeric adjustment.

Use this when you want to fine-tune a value by dragging instead of typing it directly.

During this kind of adjustment, OpenMirai can show a temporary drag editing overlay while the value is being changed.

Use The Style Reset Menu

Some compatible blocks can also show a small ... menu in the styling area.

Use this menu when you want a quick recovery action instead of changing style values one by one.

The menu can include:

• Reset Style to return the selected block's style values to baseline defaults
• Clear Styles to remove the applied style classes from the selected block

After you choose one of these actions, the menu closes again.

If the selected block does not support this menu, OpenMirai does not show it.

When Styling Is Available

The styling area appears only when the selected block supports style editing.

If a block does not support style controls, OpenMirai may show a different right-side state instead of the normal styling sections.

This means style controls are only shown for selections that can actually be styled from this panel.

When To Use Styling

Use Styling when:

• the block content is already correct
• spacing or layout needs improvement
• typography or color needs adjustment
• you want a quick reset after trying too many style changes
• the selected section needs visual polish before preview

What To Do Next

• adjust one style group at a time and review the result in the canvas
• preview the page after important visual changes
• use theme controls instead if the change should affect more of the page
• save the page once the selected block looks right