Knowles
Knowles is a warm, old-world blog theme for Drupal 10.3 and 11, built on
Pico CSS v2. It has two color schemes, dark wood
and light parchment. Visitors can get the one their device prefers, or the
site can force one. The palette uses brass, hunter green and oxblood
accents, with Fraunces for headings and Lora for text. The theme is meant
for personal blogs, journals and small editorial sites on any subject.
For a full description of the theme, visit the
project page.
Submit bug reports and feature suggestions, or track changes in the
issue queue.
Table of contents
- Requirements
- Installation
- Configuration
- Regions
- Components and style guide
- Integrations
- Third-party assets
- Maintainers
Requirements
This theme requires no modules outside of Drupal core. It uses core's
Stable 9 as its base theme.
Installation
Install as you would normally install a contributed Drupal theme. For further
information, see
Installing Drupal Themes.
composer require drupal/knowles
drush theme:enable knowles
drush config:set system.theme default knowles -y
On install, Knowles places the site branding, main and account menus,
breadcrumbs, messages, help, page title, tabs, actions and main content
blocks. It also puts a core Search form in the search modal when the Search
module is enabled.
Configuration
Go to Appearance » Settings » Knowles
(/admin/appearance/settings/knowles). Besides core's logo, favicon and
site name/slogan toggles, the theme adds:
Colors and type
- Color scheme: follow the visitor's device (default), always dark, or
always light. "Follow the device" is resolved in CSS with
prefers-color-scheme, so it causes no cache variation and no flash of
the wrong scheme.
- Custom colors: replace the accent (brass), secondary (hunter green)
and contrast (oxblood) colors. Lighter and darker shades are mixed from
each color with CSS
color-mix(). Emails sent through HTML Mail use the
same colors.
- Load web fonts: turn off to make no requests to Google Fonts. The
theme then uses old-style serif fonts installed on the device.
- Main content font: sans-serif (system UI) or serif.
Logo
- Logo style: roundel crops the logo to a circle in a brass ring,
which suits square marks. Plain shows it as uploaded, up to the header
height, which suits wide wordmarks.
- Logo for the light scheme: an optional second logo (path or upload)
shown when the light scheme is active.
Search
- Show a search button in the header, with a configurable label.
- Search page path: where the button goes, for example
/search/node
(core Search) or /search (a Search API view).
- Open search in a modal: the button opens a dialog containing the
Search modal region. Any link with the class
js-search-modal-trigger
opens it too, for example a menu link with that class added through a
module such as Menu Link Attributes.
- Search modal heading.
Footer
- Copyright text:
@year and @site_name are replaced with the current
year and the site name. Basic HTML is allowed. Leave blank to hide.
- Theme credit: show or hide "Theme: Knowles, based on Pico".
The text settings can be translated with the Configuration Translation
module.
Regions
| Region | Use |
|---|
| Header (branding and menus) | Site branding, main menu, account menu, on one row |
| Primary menu | Extra items at the end of the header bar |
| Breadcrumb, Highlighted, Help | Above the main content |
| Content top, Content | Main column |
| Sidebar | Optional right column, shown only when it has content |
| Footer brand | Left footer column, above the theme credit |
| Footer column one/two/three | Footer link columns (menus work well) |
| Footer legal | Bottom row, after the copyright line |
| Search modal | Hidden until the search button opens it |
The account menu's last link (Log in / Log out) is styled as a brass plate.
Components and style guide
Open styleguide/index.html in a browser to see every component outside
Drupal (?scheme=light previews the parchment scheme). Classes you can use
in content or templates include:
- Buttons:
.button--primary, .secondary, .contrast, .outline.
- Cards:
article (desk blotter), .card--book (with --hunter /
--tobacco), .card--note, .card-grid.
- Quotes and callouts:
.pull-quote, .callout--tip, .callout--warning.
- Media frames:
.frame--map, .frame--polaroid, .frame--cornered.
- Navigation grid:
.nav-grid with .nav-grid__item links.
- Surfaces: add
data-theme="light" or .surface-parchment to any element
to make it a parchment surface on the dark scheme (and vice versa with
data-theme="dark").
All colors are CSS custom properties prefixed --kn- (see
css/base/tokens.css). A sub-theme can override them on :root.
Integrations
Knowles includes optional styling for these contributed modules. It has no
effect when they are not installed.
- HTML Mail: a branded email
template (
templates/misc/html-mail.html.twig).
- Search API: a view with the
ID
search gets the same form and result styling as core Search, and
autocomplete lists open inside the search modal.
- Magic Login and
OpenID Connect: login
form styling.
Third-party assets
These load from public CDNs and are not included in this project:
- Pico CSS 2.1.1 (MIT), from jsDelivr, pinned with Subresource Integrity.
Knowles uses its conditional build, which only styles markup inside
.pico, so the admin toolbar and dialogs keep their core styling.
- Fraunces and Lora (SIL Open Font License 1.1), from Google Fonts, unless
turned off in the theme settings.
To serve them from your own server, override the knowles/pico and
knowles/fonts libraries with libraries-override in a sub-theme.
Maintainers
