Skip to content

Styles

Menu: Development → Styles
Deep link: /_Admin/development/styles?SiteId={siteGuid}

Manage site CSS resources: standalone .css files (external), embedded styles from pages/layouts, inline style rules from the designer, and style groups merging multiple external styles. References: Style template engine.

Permissions

List and edit: style (view / edit / delete). Tab bar Settings (site compress, UnoCSS, media split, etc.) requires site·edit. Row Version requires site·log.

How to Open

  1. In Edit Menu, enable Development → Styles.
  2. Open Development → Styles in the left sidebar.
Styles page: external tab overview

Tab bar and site settings

Tabquery nameDescription
Externalexternal (default)Standalone CSS; create, upload, online search
EmbeddedembeddedCSS saved with pages, Layouts, etc.; edit and delete only
Inline stylesinlineCSS rule blocks from page designer; edit declarations in dialog
GroupgroupMerge multiple external styles into one reference

Tab bar right Settings opens style site settings dialog.

Style tabs and settings

External tab

Toolbar

ButtonPermissionDescription
New stylestyle·editEnter edit style
Upload stylestyle·editUpload text/css file; confirm overwrite on duplicate
Searchstyle·editOnline package search; refresh list after install
External styles toolbar

List table

ColumnDescription
NameEnter edit
PreviewRoute path; open style URL in new tab
Referenced byReference relationships
Last modifiedSave time
VersionVersion history

Supports multi-select Delete.

External styles list

Style site settings dialog

Settings saves site-level style delivery and toolchain options:

AreaField / description
JS/CSS compressenableJsCssCompress
JS/CSS browser cacheenableJsCssBrowerCache
Atomic CSS (unocss)unocssSettings.enable; when on: Disable SSR, Reset default styles, JSON Config (must be valid JSON)
Split CSS by media queryenableCssSplitByMedia; when on: mobile max width, desktop min width (split/trim media rules)
Style site settings dialog

Embedded tab

Lists embedded styles. No create toolbar; click name to edit. Edit page shows Embedded style, name not editable.

ColumnDescription
NameEnter edit
Referenced byOwning object
Last modifiedSave time
Embedded styles list

Inline styles tab

Manage CSS rules (selector + declarations), often from visual editing. Click Style column name for inline style edit dialog.

ColumnDescription
StyleRule name/selector summary, click to edit
Owner typee.g. Page, View (ownerType)
Site objectOwning object name (ownerName)
Last modifiedSave time
Inline styles list

Inline style edit dialog

Edit multiple property : value pairs as { ... }:

ActionDescription
Property dropdownCommon CSS properties, filterable or custom
Value inputProperty value; color picker for color properties; media library for background images
+Add declaration
DeleteRemove current row

Confirm writes rule and refreshes list.

Inline style edit dialog

Style group tab

Merge multiple external styles into one resource group (typeName: Style).

Toolbar

ButtonPermissionDescription
New groupstyle·editOpen style group dialog
Style groups toolbar

List table

ColumnDescription
NameOpen group dialog
ItemsStyle count in group
PreviewGroup preview URL
Referenced byReference relationships
Last modifiedSave time
Style groups list

Style group dialog

AreaDescription
NameRequired on create, unique; locked after save
Add stylePick external styles not yet in group
ListStyles in group; sort, remove
Style group dialog

Edit style

Path: /_Admin/development/style/edit?SiteId=...

From External New style or name click.

Style edit: CSS editor

Header (external style)

ControlDescription
Style nameRequired on create, unique; disabled after save
FormatFormat CSS (shortcut available)

Embedded: Embedded style title + Format only.

Style edit header

Code editor

  • Language: CSS, supports KScript; external styles support code references (code-reference-type: style).
  • Save / Save and return / unsaved leave prompt.
DocDescription
Development overviewDevelopment menu index
ScriptsSite JS, similar tab structure
LayoutsCan produce embedded styles
Style template engineReferences and syntax