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: Overprint's own settings (preset, ink and paper, fonts, header layout, banner style, card line and descriptions), the engine settings it shows, and the form's sections |
config/design.php |
Presets, bundled fonts, stylesheets and script, the values of settings Overprint does not show, its own body classes and its wording of engine phrases |
custom.php |
Boots the engine; templates reach it as $this->themeEngine() |
asset/css/overprint.css |
Overprint's design, in the theme cascade layer |
asset/css/overprint-integrations.css |
Styles for plugin markup (BlockSuite), loaded after plugin stylesheets |
asset/js/overprint.js |
Fits the masthead to the length of the site's name |
asset/fonts/ |
Bricolage Grotesque, Space Mono 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. |
Overprint's own design tokens
Besides the --v-* design tokens (see Custom CSS and design tokens), Overprint defines a few of its own, which custom CSS can use too:
| Token | Use |
|---|---|
--op-ink-1 |
The first ink (the accent color): slipped shadows, misregistered titles, stickers |
--op-ink-2 |
The second ink (the primary color): two-ink pictures, the shadow under index cards and stamped boxes |
--op-key |
The key plate (the text color): heavy rules and frames |
--op-mis |
How far the first ink slips behind titles, in em |
--op-pop |
How far it slips behind buttons, cards and boxes |
--op-tilt-1 to --op-tilt-4 |
The four angles cards and labels are pasted at |
--op-tape, --op-tape-edge |
The tape's color and its torn ends (a clip-path) |
--op-font-label |
The font of labels and small print |
--op-display-width |
The width axis value Bricolage Grotesque takes for display type |
--op-blend, --op-ink-blend |
The blend modes of two-ink pictures (they swap in dark mode) |
Body classes
Overprint's settings add classes to the page's <body>, so custom CSS can target them:
| Setting | Classes |
|---|---|
| Header layout | v-header-masthead, v-header-bar, v-header-centered |
| Misregistration | op-mis-none, op-mis-slight, op-mis-loud |
| Paste-up | op-collage-tidy, op-collage-taped, op-collage-pasted |
| Pictures printed in two inks | op-ink-none, op-ink-banners, op-ink-cards |
| Paper | op-paper-plain, op-paper-grain |
| Labels and small print | op-labels-mono, op-labels-body |
| Style preset | v-preset-pink-blue, v-preset-red-teal and so on |
The ink and paper classes apply without a reload in Design Studio's preview.
Two-ink pictures
A two-ink picture is the original image in gray (filter: grayscale(1)), blended onto the paper (mix-blend-mode: multiply; screen in dark mode), under a layer of the second ink (lighten; multiply in dark mode), so the dark parts print in the ink and the light parts stay paper. The slipped first ink behind a banner picture is a drop-shadow() at the end of its filter, so it keeps its color. Nothing changes the image file itself, and item pages always show it as it is.
Card stickers
Cards print their caption as parts (.v-card__class, .v-card__creators, .v-card__date, with .v-card__sep between them). Overprint moves a caption that has a type above the title and draws the type as a sticker. $this->themeEngine()->kindLabel($item, $fallback) returns the same word: the item's Dublin Core Type when the cards show types, else its item type.
Phrases
Overprint words some of the engine's messages its own way ("This page fell out of the zine" for a missing page, "Filed under" for subjects). They are in phrases in config/design.php, keyed by the engine's English text; templates print them with $this->themeEngine()->phrase('English text').
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 Overprint 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/overprint
php theme-engine/tools/build-theme-config.php themes/overprint
php theme-engine/tests/contrast.php themes/overprint
./release.sh overprint --zip
For changes of style alone, use Advanced › Custom CSS: it is kept when the theme is upgraded.