README

A classified field file: stencilled headings, typewritten pages, rubber stamps and classification banners.

A classified field file. Typewritten sheets lie stacked in a manila folder, with a classification banner pinned to the top and bottom of every page. Section titles are rubber-stamped in red, the current page number is circled in red pen and avatars are clipped in like black and white ID photos. Form fields are typed onto a line, the comment editor is ruled paper, tables are boxed form grids and hidden topics are redacted until a moderator points at them. Selected text gets a redaction bar.

Dark mode is a carbon copy.

Headings are stencilled in Big Shoulders Stencil Display, everything else is typed in Courier Prime.

The banner text is a theme variable, so it can say whatever fits your community, in quotes ('Restricted', 'Members only'), or be removed by setting it to none and its height to 0px.

Screenshots

Light	Dark

Phone	Phone menu

How it is built

The theme only styles forumify's own CSS framework: box, card, the btn-* buttons, menus, form fields, tables, tabs, tags and alerts, plus the forum's own building blocks. It overrides no templates. Pages added by forumify updates or by plugins are built from the same classes, so they pick up the look without any extra work.

Every colour comes from a theme variable. forumify writes the light or dark set of variables depending on the visitor's preference, and the stylesheet never needs to know which one is active. forumify's own variables keep their meaning (the admin panel uses them too), only their defaults change.

Theme variables

On top of forumify's own colours, borders and font size, the theme adds these. All of them can be changed under Admin → Settings → Themes, separately for dark mode.

Variable	What it does
`dossier-banner`	Banner text, in quotes, or `none`
`dossier-banner-color, dossier-banner-text`	Banner background and text colour
`dossier-banner-height`	Banner height, `0px` removes the space it takes
`dossier-ink`	Rules, outlines and form lines
`dossier-stamp`	Rubber stamps, red pen circles and unread markers
`dossier-paper-edge`	Edge of the sheets stacked under every panel
`dossier-redaction`	The bar over hidden topics and selected text
`dossier-display-font, dossier-font`	Stencil and typewriter fonts
`color-scheme`	`light` or `dark`, so native controls and scrollbars match

Requirements

PHP 8.4 or newer
Composer

What's in here

src/
  DossierTheme.php   Theme class: name, author, stylesheets, variables
public/
  style.css               Loaded on every page while the theme is active
templates/                Overrides for forumify's and plugins' templates

Two things in composer.json make it a theme:

{
    "type": "forumify-theme",
    "extra": {
        "forumify-plugin-class": "Forumify\\DossierTheme\\DossierTheme"
    }
}

forumify discovers installed themes by that package type, and reads the class named in extra for the theme's name, stylesheets and variables.

Variables

Your theme class extends forumify's base theme, so it starts out with every variable forumify's own styles rely on: colours, elevations, borders and font size. Admins can change all of them under Admin → Settings → Themes, with separate values for dark mode.

Add your own by overriding getThemeConfig(), the docblock on your theme class shows how. Each variable becomes a CSS custom property:

.header {
    background-color: var(--c-header);
}

Stylesheets and other static files

Everything in public/ is linked into the forumify instance at public/themes/forumify/forumify-dossier-theme/ when the theme is installed or refreshed. Stylesheets listed in getStylesheets() are loaded on every page, anything else (images, fonts) can be referenced relative to them.

Using an asset builder for sass or similar? Keep the sources in assets/ and build into public/: only public/ reaches the forumify instance.

Overriding templates

Templates in templates/ replace forumify's own. The first directory is Forumify for core templates, or the plugin class name for a plugin's templates:

templates/Forumify/frontend/forum/list.html.twig
templates/AcmeCalendarPlugin/frontend/calendar.html.twig

Extend the original with the @! prefix and override only the blocks you need, so your theme keeps working when forumify updates the template:

{% extends '@!Forumify/frontend/forum/list.html.twig' %}

{% block body %}
    <div class="flex gap-4">
        {{ parent() }}
    </div>
{% endblock %}

Missing a block you need? Add it to the original template and open a pull request on the platform repository.

Developing against a forumify instance

Point a local forumify instance at your working copy with a path repository, so your changes are live without publishing anything:

cd /path/to/your/forumify-instance
composer config repositories.forumify-dossier-theme path /path/to/forumify-dossier-theme
composer require forumify/forumify-dossier-theme:@dev

The theme then shows up under Admin → Settings → Themes, where you can activate it. If it doesn't, refresh the plugin list:

php bin/console forumify:plugins:refresh

Code quality

make quality        # phpcs + phpstan
make quality-fix    # fix what phpcs can fix automatically

Publishing

Push the repository to GitHub.
Submit it to Packagist.
Tag a release. Users install it with composer require forumify/forumify-dossier-theme.

forumify / forumify-dossier-theme

Package info

Security

Statistics