1. Executive Summary

PreSkool is a complete theme module for Dolibarr ERP/CRM. It is not a CSS skin: a CSS-only theme can recolour Dolibarr but cannot rebuild its navigation. PreSkool replaces the whole back-office chrome — a white sectioned sidebar, a top bar with global search, and a purpose-built dashboard — while leaving the Dolibarr core untouched. Every screen of every installed module inherits the new look automatically, because the theme redefines the core CSS variables rather than restyling pages one by one.

The visual language reproduces the supplied PreSkool design: an indigo primary (#3D5EE1), a near-black ink banner, soft-tinted icon chips, rounded cards and generous spacing. Colours were sampled pixel by pixel from the reference image rather than estimated by eye.

2. Theme Overview

2.1 UI Philosophy

·       One visible surface: containers stay transparent and the clickable row itself carries the styling — no card inside a card.

·       Clear active state: the selected menu entry is a light indigo tile with primary-coloured text, exactly as in the design.

·       Data before decoration: every KPI is a real database aggregate, and every tile links to a list filtered to the same scope.

·       Never an empty box: a panel with no data renders an explanatory empty state, not a blank rectangle.

·       Accessibility: the operating system 'reduced motion' preference is always honoured.

3. Main Features

3.1 Dashboard

The dashboard replaces the Dolibarr home page. It opens on a dark ink welcome banner, followed by four KPI tiles, a turnover chart, a commercial pipeline donut, and activity panels.

·       KPI tiles — turnover, unpaid invoices, new customers and orders, each with a period-over-period variation badge and an inline sparkline.

·       Tile footer — every tile breaks its own population down (Paid / Unpaid, Overdue / Due soon, Customers / Prospects, Ongoing / Drafts). The two figures always belong to the tile above them.

·       Period selector — week, month or year; the whole page, including the tile links, follows the selection.

·       Turnover chart — current year against the previous one, drawn as inline SVG (no charting library, no external request).

·       Pipeline donut — commercial proposals by status, with a clickable legend.

·       Recent activity and latest invoices, rendered with Dolibarr's native object links and hover tooltips.

3.2 Sidebar

The sidebar is generated from Dolibarr's own menu tree, so every installed module — including third-party ones — appears automatically with its icon, its children and its permissions.

·       Collapsible groups with in-place accordions; a group opens only when it genuinely holds the active item.

·       Module search box to filter the navigation.

·       Favourites and a 'recently opened' section, both optional and capped by configuration.

·       Desktop rail: the sidebar folds to an icon rail; on phones it becomes an off-canvas drawer.

·       The active entry is resolved by a level-encoded identifier, not by URL, so two modules sharing a landing URL cannot light each other up.

3.3 Top Bar

·       Global search that queries third parties, invoices and products from a single field.

·       Light/dark toggle, applied before first paint so a reload never flashes the wrong theme.

·       The native Dolibarr login block is preserved — multi-company selector, print, help and user menu — and only restyled.

3.4 Cards, Buttons, Forms and Tables

Because the theme redefines the core CSS variables, native Dolibarr screens follow the palette without being individually restyled. Lists, cards, tabs, inputs, select2 dropdowns, badges and action buttons all inherit the new tokens in both light and dark mode.

4. Theme Configuration

The configuration screen is grouped into sections rather than a single flat table.

Soft tints are computed from the selected colour, so switching palette keeps chips, badges and hover states coherent. The defaults on this screen are identical to the defaults compiled into the stylesheet, so 'Reset' restores exactly the shipped look.

5. Responsive Design

Absence of horizontal scrolling is verified programmatically at 390 px (document.scrollWidth compared with window.innerWidth), not judged from a screenshot.

6. Technical Architecture

The stylesheet and script are dynamic PHP files so they can read the configuration and the current language. Asset URLs carry a revision parameter that is bumped when the module version changes, so users pick up a new release on an ordinary reload.

6.1 Installation

·       Home → Setup → Modules → Deploy external module, and upload module_PreSkool-1.0.zip.

·       Enable 'PreSkool' in the Interfaces family.

·       Optional: open the configuration screen to pick a palette or adjust the layout.

·       If the sidebar does not appear immediately, disable and re-enable the module once so the menu registration constant is written.

Only one theme module may be active at a time: two of them would compete for the same forced-menu constant. Disable any other theme module before enabling PreSkool.

7. Performance, Compatibility and Validation

·       No charting or UI framework: charts are inline SVG, so there is no vendor bundle to download.

·       With the web font disabled the theme issues no external request whatsoever.

·       Stylesheet and script are served with a one-hour cache and a version-based cache-buster.

·       Browsers: current Chrome, Firefox, Safari and Edge.

·       Core APIs used were checked for identical signatures from Dolibarr 16.0 to develop.

8. Screenshot Index

All screenshots ship in the Screenshots folder, captured at 2× or 3× pixel density.

9. Advantages and Future Improvements

9.1 Advantages

·       Reskins the entire application, including third-party modules, with no core modification.

·       Light and dark handled by a single token block — no duplicated stylesheet.

·       Configurable without touching code; palettes ship ready to use.

·       Dashboard figures come from the database and link to lists filtered identically.

9.2 Future Improvements

·       User-level theme preferences in addition to the global default.

·       A dashboard widget picker so each user can compose their own KPI set.

·       Additional preset palettes and an import/export of the configuration as JSON.

·       An explicit dark-mode toggle in the configuration screen alongside the existing default.

© 2026 DoliResources — https://www.doliresources.com