Files
| Path | Contents |
|---|---|
config/theme.ini |
Settings, page and block templates, resource page blocks and Overprint's default arrangement |
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 |
helper/ThemeEngine.php |
The theme's view helper, $this->ThemeEngine() |
asset/css/overprint.css |
Overprint's design, in the theme cascade layer |
asset/css/overprint-integrations.css |
Styles for BlockSuite's markup, loaded after module styles |
asset/js/overprint.js |
Fits the masthead to the length of the site's name |
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 |
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 (and data-layout on .v-header) |
| 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 |
All of them apply without a reload in Design Studio.
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 hero 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 or class above the title and draws the type as a sticker. $this->ThemeEngine()->kindLabel($resource, $fallback) returns the same word: the item's Type when the cards show types, else its class.
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 Overprint sets for settings it does not show. Omeka's own themeSetting() does not apply presets or defaults, so use the helper.