Files
| Path | Contents |
|---|---|
theme.ini |
Omeka's theme information, and the Theme Engine version the theme was built with (engine_version) |
config.ini |
The Configure Theme form: Plinth's own settings (preset, how works are hung, grids, captions, fonts, header layout, card descriptions, item page layout, wall label, an artist's works), the engine settings it shows, and the form's sections |
config/design.php |
Presets, bundled fonts, stylesheet and script, the values of settings Plinth does not show, its body classes and its wording of engine phrases |
custom.php |
Boots the engine; templates reach it as $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 |
asset/fonts/ |
Instrument Serif, Instrument Sans, Cormorant Garamond, Newsreader, Archivo and Atkinson Hyperlegible Next, with their OFL.txt |
common/, items/, exhibit-builder/, simple-pages/… |
Templates, at the paths Omeka looks for them: links to the engine's |
engine/ |
The Theme Engine for Omeka Classic, shared by RefBytes themes: settings logic, color math, design tokens, fonts, templates, base styles and scripts. engine/README.md documents it. |
Plinth draws its item pages, exhibits and grids with CSS alone, on the engine's templates: it has no templates of its own.
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 |
| 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.
Artists and their works
The wall label and An artist's works match people by name, since Omeka Classic has no links between items: a person is an item of the item type Person, Organization or Agent, and their works are the items whose Dublin Core Creator is exactly the person's Title. The templates are the engine's common/engine/item-wall-label.php and item-linked-works.php.
Settings resolution
$this->themeEngine()->get('key') returns a setting's value: the saved value, else the preset's value, else the config.ini default, else the value Plinth sets for settings it does not show (settings in config/design.php). Omeka's own get_theme_option() returns only the saved value, so use the helper.
Building
From the Omeka folder of the RefBytes repository:
php theme-engine/tools/link-theme.php themes/plinth
php theme-engine/tools/build-theme-config.php themes/plinth
php theme-engine/tests/contrast.php themes/plinth
./release.sh plinth --zip
For changes of style alone, use Advanced › Custom CSS: it is kept when the theme is upgraded.