AdminThemeUikit · v36
ProcessWire CMS

Konkat Default
Design System

Default AdminThemeUikit skin for ProcessWire 3.0.255+. Native uk-* classes, ProcessWire admin patterns, and runtime --pw-* tokens for light and dark mode.

Accent Colors

Three presets from ready.php: red (#eb1d61), green (#14ae85), blue (#2380e6). Custom via defaultMainColorCustom.

Click to change --pw-main-color across all components.

Colors & Design Tokens

CSS custom properties using light-dark(). Defined on :root in themes/default/admin-custom.css.

Core Palette
Main Color
--pw-main-color
#eb1d61
Text
--pw-text-color
light:#111 / dark:#fff
Muted
--pw-muted-color
Border
--pw-border-color
Main Background
--pw-main-background
light:#eee / dark:#222
Inputs Background
--pw-inputs-background
light:#f8f8f8 / dark:#161616
Blocks Background
--pw-blocks-background
light:#fff / dark:#000
Code Background
--pw-code-background
Alert Colors
Primary
--pw-alert-primary
Success
--pw-alert-success
Warning
--pw-alert-warning
Danger
--pw-alert-danger
Button & Shape Tokens
TokenLightDark
--pw-button-radius99999px (pill)
--pw-input-radius0 (sharp)
--pw-button-backgroundvar(--pw-text-color)var(--pw-main-color)
--pw-button-colorvar(--pw-blocks-background)var(--pw-text-color)
--pw-button-hover-backgroundvar(--pw-main-color)var(--pw-text-color)
--pw-button-muted-background#737373#404040

Typography

UIkit heading classes. Font: Inter (400, 600). Loaded as WOFF2 from themes/default/fonts/.

uk-h1 — Page Title

uk-h2 — Section Heading

uk-h3 — Subsection

uk-h4 — Inputfield Group

uk-h5 — Small Heading
uk-h6 — Micro Heading

Body text — field descriptions and general content.

uk-text-small uk-text-muted — Helper text, field notes.

uk-text-lead — Intro paragraphs.

uk-text-meta — Dates, metadata.

$page->get('title') — Inline code.

Link Styles

uk-link-muted

uk-link-text

uk-link-heading

uk-link-toggle wrapper

Buttons

Konkat keeps UIkit button classes but changes their hierarchy: uk-button, uk-button-primary, and uk-button-default use the filled ProcessWire action style; uk-button-secondary uses the muted fill.

Large

Large Primary Large Secondary Large Default Large Danger

Default

Small

Text & Link

 

uk-button-group
With Icons

Save Button with Dropdown (pw-button-dropdown-wrap)

From InputfieldSubmit/dropdown.js: the original submit button keeps ui-button and often pw-head-button; JavaScript adds pw-button-dropdown-main and creates a sibling pw-button-dropdown-toggle.

Dropdown Actions (pw-button-dropdown)

Form Elements

From setClasses(): uk-input, uk-select, uk-textarea, uk-checkbox, uk-radio. Sizes: uk-form-small, uk-form-large. Widths: uk-form-width-medium, uk-form-width-small, uk-form-width-xsmall, uk-form-width-large.





uk-placeholder

Drag and drop or browse.

Validation States
Horizontal Layout (uk-form-horizontal)
Vertical Layout (uk-form-vertical — stacked labels, this is the module default)
Fieldset & Legend
Page Settings

Labels & Badges

uk-label, uk-label-success, uk-label-warning, uk-label-danger. uk-badge.

Labels

Default Success Warning Danger

Badges

1 24 99+

Alerts

uk-alert, uk-alert-primary, uk-alert-success, uk-alert-warning, uk-alert-danger.

Page saved successfully.

Module installed: InputfieldTinyMCE

Page is unpublished.

Error: Required field "title" is missing.

Note: Field notes use --pw-notes-background.

Tables

Default: uk-table uk-table-divider uk-table-justify uk-table-small. Extras: uk-table-striped, uk-table-hover.

uk-table uk-table-divider uk-table-justify uk-table-small
TitleTemplateModifiedStatus
Homehome2026-01-15Published
Aboutbasic-page2026-01-14Published
Blogblog2026-01-12Draft
uk-table-striped uk-table-hover
ModuleVersionActions
InputfieldTinyMCE0.9.4Configure
ProcessPageList1.2.1Configure
AdminThemeUikit36Configure

Tab & Subnav

uk-tab
uk-subnav
uk-subnav uk-subnav-pill
uk-subnav uk-subnav-divider
uk-tab (uk-tab-left)

Vertical tab left — uk-tab-left

Dotnav (uk-dotnav)
Iconnav (uk-iconnav)

Cards

Default

uk-card-default

Primary

uk-card-primary

Secondary

uk-card-secondary

Muted

uk-card-muted

Hover

uk-card-hover

Small

uk-card-small

Card with Header, Footer & Badge
New

Card Header

Card with uk-card-header, uk-card-body, uk-card-footer, and uk-card-badge.

Read more

Accordion

Icons

uk-icon, uk-icon-button, uk-icon-link, uk-svg.

Common Admin Icons
home
cog
users
search
plus
trash
pencil
check
close
warning
info
bolt
folder
image
download
upload
copy
move
Icon Variants

Spinner

uk-spinner

Progress

Lists

uk-list with variants: uk-list-divider, uk-list-striped, uk-list-bullet, uk-list-disc, uk-list-circle, uk-list-square, uk-list-hyphen, uk-list-decimal, uk-list-muted, uk-list-emphasis, uk-list-primary, uk-list-secondary, uk-list-large, uk-list-collapse.

uk-list uk-list-divider
  • Home
  • About Us
  • Blog
  • Contact
uk-list uk-list-striped
  • Home
  • About Us
  • Blog
  • Contact
uk-list uk-list-bullet
  • Home
  • About Us
  • Blog
  • Contact
uk-list-disc / uk-list-circle / uk-list-square
  • Disc item
  • Disc item
  • Circle item
  • Circle item
  • Square item
  • Square item
uk-list-hyphen / uk-list-decimal
  • Hyphen item
  • Hyphen item
  • Decimal item
  • Decimal item
Marker colors
  • uk-list-muted
  • uk-list-emphasis
  • uk-list-primary
  • uk-list-secondary

Heading Styles

Decorative heading classes: uk-heading-small through uk-heading-3xlarge. Plus uk-heading-divider, uk-heading-bullet, uk-heading-line.

uk-heading-small

uk-heading-medium

uk-heading-large

uk-heading-divider

uk-heading-bullet

uk-heading-line

xlarge

2xlarge

Dividers
uk-divider-icon
uk-divider-small

Sections & Tiles

uk-section / uk-section-default / uk-section-muted / uk-section-primary / uk-section-secondary. uk-tile variants: uk-tile-default / uk-tile-muted / uk-tile-primary / uk-tile-secondary.

uk-tile-default
var(--pw-blocks-background)
uk-tile-muted
var(--pw-main-background)
uk-tile-primary
var(--pw-main-color)
uk-tile-secondary
var(--pw-inputs-background)
Section Sizes

uk-section-xsmall, uk-section-small, uk-section-large, uk-section-xlarge — control vertical padding.

Overlay & Marker

uk-overlay, uk-overlay-default, uk-overlay-primary. uk-marker.

uk-overlay uk-overlay-primary uk-position-bottom

uk-marker shown top-right. uk-overlay-default uses --pw-modal-color.

Slidenav

uk-slidenav for image gallery / slider navigation.

 

uk-slidenav-previous / uk-slidenav-next

 

uk-slidenav-large

Text Utilities

All uk-text-* classes used in the admin CSS overrides.

Colors

uk-text-muted

uk-text-primary

uk-text-secondary

uk-text-success

uk-text-warning

uk-text-danger

uk-text-emphasis

Alignment

uk-text-left

uk-text-center

uk-text-right

Weight & Transform

uk-text-bold

uk-text-light

uk-text-italic

uk-text-uppercase

uk-text-capitalize

UK-TEXT-LOWERCASE

Sizing

uk-text-small

uk-text-default

uk-text-large

uk-text-lead

uk-text-meta

Overflow

uk-text-truncate — This text will be truncated with an ellipsis if too long

uk-text-break — Superlongwordthatwillbreakifneeded

uk-text-nowrap — This text will never wrap to a new line

Utility Classes

Background, visibility, width, flex, grid, and other utility classes used in the admin.

Backgrounds
uk-background-default
uk-background-muted
uk-background-primary
uk-background-secondary
Visibility

uk-hidden, uk-visible@s, uk-visible@m, uk-visible@l, uk-hidden-hover, uk-invisible

Widths (from templates)
uk-width-1-3
uk-width-2-3
uk-width-auto
uk-width-expand

Also: uk-width-1-1, uk-width-1-2, uk-width-1-4, uk-width-1-5, uk-width-1-6, uk-child-width-*

Flex
uk-flex-left uk-flex-between uk-flex-right

uk-flex, uk-flex-middle, uk-flex-center, uk-flex-between, uk-flex-wrap, uk-flex-column, uk-flex-first, uk-flex-last

Grid

uk-grid, uk-grid-small, uk-grid-medium, uk-grid-large, uk-grid-collapse, uk-grid-divider, uk-grid-match, uk-grid-margin

uk-grid-divider
Column 2
Column 3
Other

uk-clearfix, uk-float-right, uk-float-left, uk-overflow-auto, uk-inline, uk-margin-remove, uk-margin-remove-top, uk-padding-small, uk-logo-inverse

Konkat Helpers

pw-text-main-color pw-bg-main-color

pw-text-main-color applies --pw-main-color. pw-bg-main-color applies main color background, border, and contrasting text.

Masthead

From _masthead.php: uk-navbar, uk-navbar-container, uk-navbar-transparent, uk-container uk-container-expand, uk-navbar-left, uk-navbar-right, uk-navbar-nav, uk-logo.

Default
Colored Masthead Variant

Inputfield Wrappers

Real ProcessWire wrapper markup from InputfieldWrapper: ul.Inputfields, li.Inputfield, label.InputfieldHeader, and div.InputfieldContent. Use this structure for native module forms.

Standard Inputfield Form

  • Required page title.

  • Notes use the same muted admin text pattern.

Fieldset Wrapper — InputfieldFieldset

States

  • Field is required.

Repeater Header + useBoldItemHeaders

Module Guidelines

From themes/default/KONKAT_THEME.md: standard ProcessWire Inputfields inherit the skin automatically. Custom Process module markup should use scoped selectors, UIkit components, and --pw-* variables instead of hardcoded colors.

Preferred Module Form API
$form = $this->modules->get('InputfieldForm'); $f = $this->modules->get('InputfieldText'); $f->name = 'title'; $f->label = 'Title'; $f->required = true; $form->add($f); $fs = $this->modules->get('InputfieldFieldset'); $fs->label = 'Settings'; $form->add($fs); $select = $this->modules->get('InputfieldSelect'); $select->name = 'status'; $select->label = 'Status'; $select->addOptions(['published' => 'Published', 'hidden' => 'Hidden']); $fs->add($select); return $form->render();

pw-wrap Panel

A custom Process module view can use pw-wrap to get the same panel background, border, spacing, and dark-mode behavior as core admin screens.

Use Tokens

Brand, border, text, background, and alert colors should come from --pw-main-color, --pw-border-color, --pw-text-color, and related variables.

Scope Custom CSS

Module-specific CSS should be scoped to a module container, for example .MyModule .status-indicator, so it does not leak into the admin.

Example
<div class="pw-wrap MyModule"> <h2>My Module</h2> <p class="pw-text-main-color">Token-aware highlight</p> <span class="uk-badge pw-bg-main-color">Active</span> </div>

Native Module Workspace

Canonical full-page structure distilled from real Ichiban and Vox admin screens. Use this composition for custom Process modules before inventing a dashboard layout.

Entries

Review content, status, and recent activity.

Export CSV
Published128
Pending3
This month24
Clear
2 selected
TitleTypeStatusModifiedActions
Welcome thread
Started by admin
DiscussionPublishedToday, 10:42
EditView
Product question
Awaiting review
QuestionPendingYesterday
Review

No matching entries

Clear the filters or create the first entry.

Recommended order
1. Native ProcessWire page title / headline 2. uk-tab for primary module sections 3. Page header with short context and 1–2 actions 4. Optional stat cards only when the numbers aid decisions 5. Filters in one bounded panel 6. uk-overflow-auto or an overflow-safe table panel 7. Bulk bar only after selection 8. Helpful empty state with one next action
PHP view skeleton
<div class="MyModule pw-module-workspace"> <ul class="uk-tab" aria-label="Module sections">...</ul> <div class="pw-module-head">...</div> <div class="uk-grid-small uk-child-width-1-3@m" uk-grid>...</div> <form class="pw-filter-panel">...</form> <div class="pw-table-panel"> <table class="uk-table uk-table-divider uk-table-hover uk-table-small">...</table> </div> </div>

Modal

uk-modal-dialog, uk-modal-header, uk-modal-body, uk-modal-footer, uk-modal-title, uk-modal-close-default.

Confirm Delete

Are you sure you want to delete this page?

Light/dark mode

    

Offcanvas

uk-offcanvas, uk-offcanvas-bar. From _offcanvas.php.

Notifications

Pagination

Description List

From setClasses(): uk-description-list uk-description-list-divider.

Template
basic-page
Parent
/home/about/
Created
2026-01-10 14:30
Modified
2026-01-15 09:22
Created By
admin

Comment

uk-comment, uk-comment-header, uk-comment-body, uk-comment-meta, uk-comment-primary.

Admin User

Comment component used in page edit discussions. uk-comment-primary highlights important comments.

Panel & Scrollable

uk-panel, uk-panel-scrollable.

uk-panel-scrollable
  • Page: Home
  • Page: About Us
  • Page: Services
  • Page: Blog
  • Page: Blog Post 1
  • Page: Blog Post 2
  • Page: Blog Post 3
  • Page: Contact
  • Page: Privacy Policy
  • Page: Terms
  • Page: Sitemap
  • Page: 404

CSS Overrides & Config

Colored Masthead
:root { --pw-masthead-background: var(--pw-main-color); --pw-masthead-active-color: white; --pw-masthead-text-color: rgba(255,255,255,0.8); --pw-masthead-border-color: var(--pw-main-background); --pw-masthead-logo-color: white; --pw-masthead-input-background: var(--pw-masthead-background); --pw-masthead-input-color: var(--pw-masthead-active-color); --pw-masthead-input-border: var(--pw-masthead-text-color); --pw-masthead-menu-item-background-hover: rgba(255,255,255,.2); }
Borderless
:root { --pw-border-color: var(--pw-main-background); --pw-inputs-background: var(--pw-blocks-background); }
Konkat Theme Files
wire/modules/AdminTheme/AdminThemeUikit/themes/default/ KONKAT_THEME.md admin-custom.css admin.css admin.js config.php ready.php examples/borderless.css examples/masthead.css examples/minimal.css toggles/useBoldItemHeaders.css toggles/usePageListButtons.css toggles/useInputFocus.css toggles/InputfieldTable.css
AdminThemeUikit Theme Settings
// Installer/config theme names themeName = "default" // Konkat default themeName = "original" // Core original // Konkat settings from themes/default/config.php defaultStyleName = "light" | "dark" | "auto" defaultMainColor = "red" | "green" | "blue" | "custom" defaultMainColorCustom = "#eb1d61" defaultMainColorCustomDark = "#eb1d61" defaultCustomCssFile = "/site/templates/styles/my-skin.css"
CSS Toggles (themes/default/ready.php)

useInputFocus useBoldItemHeaders usePageListButtons useTogcbx use2Colors noUserMenu

TinyMCE Integration

When TinyMCE uses the default oxide skin, Konkat swaps in skin.min.css and content.css. The editor content imports admin-custom.css, so the same --pw-* variables apply inside rich text fields.

setClasses() — Module Constructor
$this->setClasses([ 'input' => 'uk-input', 'input-small' => 'uk-input uk-form-small', 'input-checkbox' => 'uk-checkbox', 'input-radio' => 'uk-radio', 'input-password' => 'uk-input uk-form-width-medium', 'select' => 'uk-select', 'select-asm' => 'uk-select uk-form-small', 'select-small' => 'uk-select uk-form-small', 'textarea' => 'uk-textarea', 'table' => 'uk-table uk-table-divider uk-table-justify uk-table-small', 'dl' => 'uk-description-list uk-description-list-divider', ]);