Styling one element

The Sections map writes rules. The inspector does the opposite: it changes one element, the one you clicked, and leaves everything like it alone.

Use it when a rule can't reach something, or when you want to try an idea before making it general.

Picking something#

Choose Material Inspector from the toolbar — the crosshair tool. Now hovering the live IDE paints a translucent blue box over whatever is editable underneath, with a small tag naming it and giving its size in pixels. Click to select; the inspector panel opens on the right.

Two things worth knowing:

Hold Alt to peek. The highlight overlay disappears while Alt is held, so you can see the interface you're covering up. Nothing advertises this.

The Pointer tool also selects, silently. It picks elements without drawing any highlight, and it does not open the inspector. If clicking around with the arrow seems to do nothing, that's why — switch to Material Inspector.

Selecting a region in the Sections map does not narrow what the inspector will pick — the two tools work independently, and the crosshair reaches anywhere in the app.

What you can change#

The inspector adapts to what you clicked, and it recognises exactly two kinds of thing:

Icon / SVG — Color, Size (8–96 px, width and height together), Opacity.

Container — everything else: Background, Background image, Opacity, and Custom classes.

That's the honest shape of it. A button, a panel, a heading and a label all count as containers and all get the same four controls. There is no button-specific or text-specific inspector. For border radius, padding or font size on a single element, use the Styles pane below.

Note

Clicking a picture doesn't select the picture. The crosshair only lands on elements Semantix has marked as editable, plus icons — so a click on a photograph selects the container holding it. To change the image itself, use that container's Background image control.

Background image draws from your asset library — there is no upload button in this control, so upload in the Assets tray first. You get cover/contain, a scale slider and X/Y position. Choosing an SVG reveals Fill and Stroke pickers that recolour the graphic itself, which CSS alone cannot do. That recolouring only works on SVGs that set their colours as attributes; ones that use inline styles or currentColor won't budge.

The Styles pane#

Below the controls, on every selection, sits Styles — five collapsed groups covering twenty properties:

Layout — display, width, height, padding, margin
Typography — color, font-size, font-weight, text-align, line-height
Background — background-color, background-image
Border — border-width, border-style, border-color, border-radius
Effects — opacity, box-shadow, filter, transform

Each row is prefilled with the value the element currently has, and typing replaces it. The checkbox beside each one is a neutraliser, not a visibility toggle: unticking sets the property to initial, and re-ticking removes your override so the app's own value returns.

Nothing here is validated. An unparseable value is simply ignored by the browser.

Custom classes#

A named, reusable rule you write yourself. Press + under Custom classes, name it, and write declarations in the editor that opens — it has CSS syntax highlighting, undo and wrapping.

The name is cleaned up as you type: spaces and punctuation become dashes. Clearing the name deletes the class. Braces are stripped from what you write, so you can only write declarations — no nested rules, no media queries, no pseudo-selectors.

Important

Custom classes are not saved. They live for as long as the editor is open, vanish when you leave edit mode, and are not included when you save or export a theme. "Reset surface" doesn't touch them either.

They are useful for trying something out. They are not yet a way to keep it. If you want a lasting change, make it in the Sections map or in the theme's colours.

What sticks and what doesn't#

Only marked surfaces persist. Semantix tags certain elements as themeable; edits to those are saved and come back after a restart. Edits to anything nested inside them last only for the session and are reverted when you leave.

You can tell which you have: Reset surface appears in the inspector only when the element is a marked surface and has saved edits. Its absence means what you're changing is temporary.

Two more buttons#

Collect grabs the image out of whatever you selected — a background image, an <img>, an icon — and files it in your asset library for reuse. It only collects images that already exist; it can't photograph an arbitrary piece of the interface.

Reset surface removes the saved edits for that surface and returns it to the theme's own look. It leaves custom classes alone.