Files
| Path | Contents |
|---|---|
config/theme.ini |
Settings, page and block templates, resource page blocks and Plinth's default arrangement |
config/design.php |
Presets, bundled fonts, stylesheets and script, and the values of settings Plinth does not show |
helper/ThemeEngine.php |
The theme's view helper, $this->ThemeEngine() |
asset/css/plinth.css |
Plinth's design, in the theme cascade layer |
asset/js/plinth.js |
Lays out staggered columns and rows of equal height, and measures the header for the bar over the image |
engine/ |
The Theme Engine, shared by RefBytes themes: templates, base styles, scripts, color math, design tokens, fonts, presets, dates |
language/ |
Translations; template.pot lists every string |
Plinth's own design tokens
Besides the --v-* design tokens (see Custom CSS and design tokens), Plinth defines a few of its own, which custom CSS can use too:
| Token | Use |
|---|---|
--pl-rail-w |
Width of the side rail |
--pl-wall |
The wall behind a work: item pages and even squares |
--pl-mat, --pl-mat-edge |
The mat around matted and framed works, and its edge |
--pl-frame |
The color of frames |
--pl-hang |
The shadow of hung works |
--pl-gap-x, --pl-gap-y |
Space between works in grids |
--pl-row-h |
The height rows of equal height aim for |
Body classes
Plinth's settings add classes to the page's <body>, so custom CSS can target them:
| Setting | Classes |
|---|---|
| Header layout | v-header-rail, v-header-bar, v-header-overlay (and data-layout on .v-header) |
| Grids of works | pl-grid-masonry, pl-grid-rows, pl-grid-even |
| How works are hung | pl-art-hung, pl-art-mat, pl-art-frame, pl-art-flat |
| Style preset | v-preset-white-cube, v-preset-salon and so on |
Grids
Grids of works are the engine's card lists (.v-results) in grid mode. For staggered columns, plinth.js turns the grid's rows into 4-pixel tracks and has each card span its own height; for rows of equal height, it sets each card's --pl-ar (its image's width over height). Card order in the HTML, and so reading and keyboard order, never changes.
Settings resolution
$this->ThemeEngine()->get('key') returns a setting's value: the saved value, else the preset's value, else the theme.ini default, else the value Plinth sets for settings it does not show. Omeka's own themeSetting() does not apply presets or defaults, so use the helper.