1. Executive Summary

Wooble is a premium theme-module for Dolibarr ERP/CRM. It replaces the whole back-office chrome - top bar, sidebar, dashboard, lists, cards, forms and login screen - with a modern SaaS interface built around a full-width violet gradient header, a light navigation rail and soft-shadowed white cards on a pale blue-grey canvas.

Wooble ships three complete, interchangeable demos. Each one is a full identity - its own accent palette, KPI card treatment, dashboard composition and login layout - and the administrator switches between them from the configuration screen in a single reload, without reinstalling anything and without touching a single file of the Dolibarr core.

Demo	Focus	Signature KPI cards	Primary data sources
Wooble Analytics	Audience and activity intelligence	Wide cards with a share percentage and a progress track	Users, third parties, proposals, agenda
Wooble Projects	Delivery and project cockpit	Sparkline cards over an ongoing-projects table	Projects, tasks, orders, invoices, agenda
Wooble Finance	Treasury and revenue	Full-bleed gradient wallet cards	Bank accounts, invoices, payments, projects

 

Every figure displayed comes from a live SQL query against the standard Dolibarr tables. Nothing on any dashboard is hardcoded or simulated.

2. Theme Overview

Wooble is delivered as a Dolibarr module (a "theme-module"), not as a CSS theme. A CSS-only theme can recolour stock Dolibarr but cannot recreate the interface structure the design calls for: a custom sidebar rendered from the native menu tree, a full-width gradient top bar carrying the brand, and a bespoke dashboard. The module form makes all three possible while leaving the core untouched.

Property	Value
Commercial name	Wooble
Technical name	theme_wooble
Folder name	wooble
Descriptor class	modWooble
Module id ($this->numero)	10000480
Version	1.0
Configuration prefix	WOOBLE_*
Package file	module_wooble-1.0.zip
Editor	DoliResources - https://www.doliresources.com
Licence	GPL-3.0-or-later

 

3. Design Objectives

·       Reproduce the reference design faithfully: gradient top bar, light sidebar, white cards, soft shadows, generous spacing and a geometric sans-serif type scale.

·       Ship three distinct professional identities from a single codebase, so a customer can pick the one that matches their business without a bespoke development.

·       Keep every figure real: map each metric of the design onto a documented Dolibarr equivalent rather than inventing a number.

·       Never modify the Dolibarr core: only official extension points (module_parts, hooks, forced menu managers, configuration constants).

·       Stay fast: one dynamic stylesheet and one script, both cached, no heavy framework, no external CDN dependency.

4. UI/UX Philosophy

·       One visible surface at a time. Inner containers are transparent and the parent row carries the styling, so no card ever sits inside another card.

·       A single clear active state: soft primary plate, left accent bar and a coloured bullet, applied to the whole clickable row rather than to the label alone.

·       Data first. The figure is the largest element of a KPI card and never wraps; long amounts step down a size rather than breaking across two lines.

·       Empty states, never empty boxes. A panel with no data renders an icon, a title, a one-line explanation and a call to action.

·       Colour is never the only signal: priorities and statuses carry a label next to their coloured marker.

5. Wooble Analytics Demo

Audience and activity intelligence. Three wide KPI cards, each with a headline figure, its share of a meaningful whole and a progress track, sit above a six-up metric strip with sparklines and a large multi-series turnover curve.

The reference design shows web-analytics metrics. An ERP has no page views or bounce rate, so each is mapped onto its closest business equivalent and the label displayed names the business metric - the interface never claims to measure web traffic:

Design metric	Wooble metric	Computation
Total visitors	Active users	Enabled users over total users
New signups	New customers	Third parties created in the period
Email enquiries	Open requests	Proposals still open
Visits	Visits	Agenda events recorded in the period
Page views	Documents	Invoices + orders + proposals created
Pages / visit	Docs / customer	Documents over active customers
Average time	Average delay	Mean order-to-invoice delay, in days and hours
Returning visits	Returning	Customers with more than one invoice
Bounce rate	Conversion	Signed proposals over decided proposals

 

The conversion rate deliberately divides by proposals that reached a decision (signed or refused) rather than by every proposal: including still-open proposals in the denominator would drag the rate down and misrepresent commercial performance.

6. Wooble Projects Demo

A delivery cockpit. Three sparkline KPI cards head the page, followed by the ongoing-projects table: reference and title, the responsible user with their avatar, a priority badge and a progress bar with its percentage.

·       The responsible user is the internal PROJECTLEADER contact of the project; when a project has none, the creator is shown instead.

·       The priority is derived from the deadline: due within a week (or overdue) is High, within a month is Medium, beyond that is Low.

·       The progress is averaged over the project tasks; a project with no task falls back to its opportunity percentage so the bar is never misleadingly empty.

·       Rows are ordered by nearest deadline first, and undated projects sort last.

7. Wooble Finance Demo

Treasury and revenue. Three full-bleed gradient wallet cards - turquoise, soft violet and blue - carry the headline financial figures, above the projects table and the revenue charts.

The reference design shows cryptocurrency wallets. Those have no place in an ERP, so each card is replaced by its business equivalent, as specified:

Design card	Wooble card	Computation
Bitcoin wallet	Treasury	Balance of all open bank accounts
Dollar wallet	Turnover	Invoiced over the selected period
Crypto wallet	Collections	Payments actually received over the period
Referrals	Revenue by channel	Turnover split by customer type / origin

 

8. Dashboard Features

·       Period selector (week / month / year) that drives every KPI, chart and tile link.

·       Quick-action tiles for the six most common creations (invoice, proposal, order, customer, product, event).

·       A turnover curve comparing the current year against the previous one.

·       A commercial pipeline panel with proposals grouped by status.

·       Latest invoices, today's agenda and a recent-activity feed.

·       Native Dolibarr widget zone (FormOther::getBoxesArea) so users keep their own boxes.

9. KPI Cards

One markup, five looks. The dashboard stamps a style class on the KPI grid and each tile carries its own tint or gradient as inline CSS custom properties, so switching demo restyles the row with no conditional HTML.

Style	Used by	Description
progress	Analytics	Outline icon, large figure, share percentage, full-width track
spark	Projects	Icon and label on one line, figure below, sparkline at the bottom
wallet	Finance	Full-bleed gradient, white type, large watermark glyph
solid	Optional	Full-colour tile
soft	Optional	White card with a tinted icon chip

 

Every KPI card is clickable through a stretched-link overlay, and its destination is a Dolibarr list pre-filtered to exactly the same scope - same period, same statuses - so the list total always matches the number shown on the tile.

10. Sidebar Features

·       Rendered from the NATIVE Dolibarr menu tree, so it automatically reflects the enabled modules and the current user's permissions. It is never a static list.

·       Accordion groups that fold in place, with a chevron that is a separate click target from the module link.

·       A level-encoded active id so the highlighted entry stays correct across pages and across browser tabs.

·       Menu search, bookmarks/favourites and a recently-opened section.

·       Seven modes: preset, mini rail, large, floating, dark, light and coloured.

·       Collapsed state persisted in localStorage and applied before the first paint, so a reload never flashes the wrong layout.

11. Topbar Features

The signature Wooble element: a full-width violet-to-purple gradient bar carrying the brand on the left, then the sidebar toggle, the global search pill, and on the right the language, entity selector, print, help, dark-mode switch, user avatar and logout.

The brand block is MOVED into the bar from the sidebar rather than duplicated, so the logo keeps coming from Dolibarr through dol_buildpath and a customer logo is honoured automatically.

12. Global Search

The search pill submits to the theme's own results page, which searches third parties, products, invoices, orders, proposals and projects in one pass and groups the results by type. Keyboard shortcut: "/" focuses the field from anywhere.

13. Widgets

The dashboard exposes the native Dolibarr widget zone alongside the Wooble panels, so users keep the boxes they already configured (base statistics, account balances, low stock alerts, per-month graphs). On first visit the personal zone is seeded with a sensible default set so the add-widget selector is available immediately.

14. Charts and Data Visualization

·       Inline SVG only - no charting library is loaded, so there is no extra network cost and no external dependency.

·       Turnover curve with a hover crosshair, a marker dot and a tooltip.

·       Sparklines on KPI cards and on the Analytics metric strip.

·       A donut for the commercial pipeline, with zero-length arcs skipped so no stray dot is painted on the ring.

·       Progress bars in the project tables and on the Analytics KPI cards.

·       Every chart follows the demo palette and re-tints automatically in dark mode.

15. Tables and Lists

Native Dolibarr lists are restyled: clear headers on a tinted plate, airy rows, hover highlight, rounded card corners without white notches, and a filter bar in its own card. The theme's own tables add avatars, priority badges and progress bars. Wide tables scroll inside their own container so the page itself never scrolls sideways.

16. Forms

Text, number, select, date, autocomplete, checkbox, radio, switch, upload, textarea and monetary fields are restyled to the Wooble input language: soft border, themed focus ring, comfortable height. select2 dropdowns get a solid themed background and a readable highlighted option - the stock override leaves it white on white. Required markers, error and validation messages follow the semantic palette. All native Dolibarr form components keep working unchanged.

17. Login Pages

Each demo brings its own login layout, resolved SERVER-side in the stylesheet: the login screen is pre-session, so neither localStorage nor the pre-paint script is available and the administrator default is the single source of truth there.

Demo	Layout	Treatment
Wooble Analytics	centered	Light canvas, violet gradient panel, white form card
Wooble Projects	split	Split screen, turquoise and violet accents
Wooble Finance	card	Gradient card presentation, cyan / blue / violet

 

All three carry the logo, username, password, remember-me, forgotten-password link, error messages and are fully responsive.

18. Responsive Design

·       Large screens, laptops, tablets and phones, verified down to a 390 px viewport.

·       The sidebar becomes an off-canvas drawer on phones; the folded rail is a desktop-only state and is never applied on mobile.

·       The top bar simplifies on phones to brand, menu and user - the native tool row is otherwise 684 px wide and would force the page to scroll sideways.

·       KPI grids collapse to a single column; tables scroll inside their own container.

·       Verified programmatically: document.scrollWidth equals window.innerWidth at 390 px on all three demos.

19. Dark Mode

A true dark mode, not a tinted light mode. The whole surface family is redefined: canvas, cards, sidebar, tables, forms, dropdowns, charts and modals. Two specific corrections matter:

·       Pastel tiles are NOT reused. An orange or red at 11 % opacity renders brown over a navy canvas and a green renders olive, so in dark mode the tile drops to the card surface and the colour moves into the icon chip.

·       Core rules that hardcode a hex colour instead of a CSS variable - notably the #f0f0f0 odd-row separator - are re-tinted to the theme border token, otherwise they draw a harsh near-white line across dark tables.

Dark mode can be toggled from the top bar, set as the default in the configuration, and the stored preference is applied before the first paint so a reload never flashes.

20. Theme Configuration

A single grouped configuration screen drives everything. Its defaults and the stylesheet defaults are read from the SAME preset array, so a "reset" can never restore a palette the CSS no longer knows about.

Group	Settings
Demo	Wooble Analytics / Wooble Projects / Wooble Finance
Palette	Preset, Purple, Blue, Cyan, Turquoise, Green, Orange, Red, Pink, Indigo, Custom; success / danger / warning colours; custom top-bar gradient
Layout	Wide, Boxed, Compact, Fluid, Comfortable
Sidebar	Preset, Mini, Large, Floating, Dark, Light, Coloured; rail width
Top bar	Preset, Gradient, Transparent, Light, Dark, Coloured
KPI cards	Preset, Progress, Sparkline, Wallet, Solid, Soft
Typography	Poppins, Nunito Sans, Inter, Figtree, Roboto, System; base size
Effects	Card radius, shadows, borders, animations, dark-mode default
Dashboard	Turnover basis (HT / TTC), abandoned invoices, hidden panels

 

The custom gradient is validated against a strict character whitelist before it is written into a CSS declaration - braces, semicolons, quotes and url() are rejected, so a configuration value cannot close the rule and inject arbitrary CSS.

21. User Preferences

Settings are stored per entity, so a multi-company installation can give each entity its own look. On top of the administrator defaults, each user keeps their own dark-mode choice, sidebar collapsed state and recently-opened list, held client-side so no database write happens on every page view. A per-request "?woobledemo=" preview lets a demo be shown or screenshotted without changing the stored configuration.

22. Accessibility

·       Text and interface contrasts follow WCAG AA on both light and dark surfaces.

·       Full keyboard navigation with visible focus rings on every interactive element.

·       ARIA labels on icon-only controls; decorative glyphs marked aria-hidden.

·       Stretched links carry an explicit accessible name, so a KPI tile is announced.

·       Click targets are at least 40 px on touch devices.

·       Status and priority are never conveyed by colour alone - each carries a text label.

·       Animations honour the operating system's reduced-motion preference, and can be switched off entirely from the configuration.

23. Performance Optimization

·       One dynamic stylesheet and one dynamic script for the whole back office, both served with a one-hour cache and a revision-based cache-buster.

·       No charting library, no icon font beyond the Font Awesome that Dolibarr already ships, no external CDN - the strict-CSP-safe choice and one fewer network hop.

·       All charts are inline SVG generated server-side.

·       Expensive counts are cached in the session.

·       Web fonts are optional and can be disabled to fall back to a system stack.

24. Security Considerations

·       No file of the Dolibarr core is modified, added to or patched.

·       Configuration writes go through dolibarr_set_const with CSRF tokens; the reset action is token-protected and confirmed.

·       The configuration page is view-only for non-administrators and every mutating action is blocked server-side, independently of the interface.

·       All output is escaped with dol_escape_htmltag; all GET parameters are read through GETPOST with a filter chosen to preserve the value.

·       The custom gradient - the only free-text setting rendered into CSS - is validated against a character whitelist, not merely escaped.

·       The sidebar renders the native menu, so Dolibarr permissions are enforced by construction: a user never sees an entry they cannot open.

25. Dolibarr Integration

Wooble uses only official extension points:

Mechanism	Use
module_parts[css] / [js]	Inject the theme stylesheet and script on every page
module_parts[menus]	Register the custom menu manager
MAIN_MENU*_FORCED	Force the Wooble sidebar on standard, front and smartphone
Hook "main"	Redirect the home page to the Wooble dashboard
Hook "addHtmlHeader"	Pre-paint state script and print stylesheet
Hooks "toprightmenu" / "searchform"	Top-bar and search integration
print_eldy_menu / print_left_eldy_menu	Read the native menu tree
FormOther::getBoxesArea	Native widget zone on the dashboard

 

26. Dolibarr Compatibility

The descriptor declares need_dolibarr_version = array(16, 0) and phpmin = array(7, 0). Every core API used was checked for existence and for an unchanged signature across the supported range. The theme was built and verified on Dolibarr 17.0.3 with PHP 8.1, and is compatible with Dolibarr 20 and 21. It works with native modules, with well-behaved external modules, in multi-entity environments and with left-to-right and right-to-left languages.

27. Browser Compatibility

The theme uses CSS custom properties, flexbox and grid - all baseline in every currently supported browser. It was verified in a Chromium 148 engine (the base of Google Chrome and Microsoft Edge) at desktop and mobile viewports, in light and dark mode. Firefox and Safari are supported by construction: no engine-specific property or prefix-only feature is used. See the Technical Validation Report for exactly which browsers were executed and which were not.

28. Technical Architecture

A single resolved preset drives everything. core/wooble_presets.php is a pure library - it never bootstraps Dolibarr and never prints - so the dynamic CSS, the dynamic JavaScript, the dashboard, the sidebar renderer and the configuration page all include it and all resolve the same values. Adding a fourth demo is one entry in that array.

The active demo is resolved in TWO mirrored places - the pre-paint header script and the module script - because a setting applied in only one of them is a dead setting. The script never overwrites what the pre-paint already stamped on the document element: the script may be served from an hour-old cache while the pre-paint is always fresh.

29. Folder Structure

Path	Role
core/modules/modWooble.class.php	Module descriptor, init() and remove()
core/wooble_presets.php	Preset and design-token engine (single source of truth)
core/wooble_dashdata.php	Per-demo dashboard queries
core/menus/standard/wooble_menu.php	Menu manager
core/menus/standard/wooble.lib.php	Sidebar renderer
class/actions_wooble.class.php	Hooks: redirect, pre-paint header
class/wooble_demo.class.php	Demo dataset generator
css/wooble.css.php	Complete dynamic stylesheet
js/wooble.js.php	Theme toggle, drawer, accordions, top-bar injection
index.php	The three dashboards
search.php	Global search results
admin/setup.php	Configuration screen
langs/<lang>/wooble.lang	Translations (7 languages)

 

30. Installation Guide

Summary - the full procedure is in Wooble_Installation_Guide.pdf.

·       Home > Setup > Modules > Deploy an external module, and upload module_wooble-1.0.zip.

·       Find "Wooble" in the module list and enable it.

·       If the Wooble sidebar does not appear at once, disable and re-enable the module once so init() re-registers the forced menu managers.

·       Open the module configuration and choose one of the three demos.

31. Upgrade Guide

Upload the new package over the previous one and enable it. When the module version changes, init() bumps the asset revision, so browsers pick up the new stylesheet and script on an ordinary reload. Configuration is preserved: every setting is a Dolibarr constant and no upgrade step deletes them. After changing the module id or version, disable and re-enable once so init() runs again.

32. Customization Guide

·       Most needs are covered by the configuration screen: demo, palette, layout, sidebar, top bar, KPI style, font, radius, shadows, borders and animations.

·       To add a fourth demo, add one entry to wooblePresets(); it appears in the selector automatically and needs no new stylesheet.

·       To change a colour outside the ten palettes, choose the Custom palette and set the primary and accent colours, or supply a full CSS gradient for the top bar.

·       To extend the dashboard, add a query to core/wooble_dashdata.php and a panel to index.php - both follow one documented pattern.

33. Translation System

All interface text goes through the Dolibarr translation system; nothing is hardcoded, including every label, hint and option on the configuration screen. Seven languages ship with the theme:

Language	File
English	langs/en_US/wooble.lang
French	langs/fr_FR/wooble.lang
Spanish	langs/es_ES/wooble.lang
German	langs/de_DE/wooble.lang
Italian	langs/it_IT/wooble.lang
Portuguese (BR)	langs/pt_BR/wooble.lang
Dutch	langs/nl_NL/wooble.lang

 

All seven files carry exactly 248 keys with identical names, verified automatically. Module keys are prefixed to avoid silently colliding with a core key of the same name, which Dolibarr would resolve in favour of the core file.

34. Screenshots Description

27 screenshots ship with this package, nine per demo, captured at 3200x1980 pixels (1600x990 at 2x) from a live Dolibarr instance with the theme's own demo dataset:

File	Content
*_01_dashboard.png	Demo dashboard, light mode
*_02_thirdparties.png	Third-party list
*_03_invoices.png	Invoice list
*_04_projects.png	Project list
*_05_products.png	Product list
*_06_agenda.png	Agenda
*_07_setup.png	Theme configuration screen
*_08_dark.png	Dashboard in dark mode
*_09_mobile.png	Dashboard at a 390 px mobile viewport

 

35. Advantages

·       Three professional identities for the maintenance cost of one codebase.

·       Every figure is real Dolibarr data, queried live - the dashboards are usable, not decorative.

·       The sidebar follows the native menu and the user's permissions automatically, so it never drifts out of step with the installed modules.

·       No core modification: upgrading Dolibarr does not conflict with the theme.

·       A true dark mode across the whole back office, including native pages.

·       Deep configuration without touching a file.

·       Light footprint: no charting library, no external CDN.

36. Limitations

·       Only one theme-module can own the forced menu managers at a time. If another theme-module is installed, the last one enabled wins, and both injecting their own top bar produces a duplicated chrome.

·       The Treasury and Collections cards of the Finance demo require the Bank module; without it they legitimately read zero.

·       The average order-to-invoice delay needs orders and invoices to be linked; unlinked documents cannot be measured and are excluded rather than counted as zero.

·       Right-to-left languages are supported through the standard Dolibarr RTL mechanism but were not visually verified in this release.

·       Very old browsers without CSS custom-property support are not supported.

37. Future Enhancements

·       Additional demos built on the same preset engine.

·       Per-user demo selection in addition to the per-entity default.

·       Drag-and-drop dashboard panel arrangement, persisted per user.

·       Chart export to PNG and CSV.

·       A visual theme builder that writes the JSON configuration.

·       A verified right-to-left pass.

38. Support and Maintenance

Wooble is published and maintained by DoliResources. Support requests, bug reports and customisation enquiries go through https://www.doliresources.com. Please include the Dolibarr version, the PHP version, the active demo, the browser and a screenshot of the problem.

 

Copyright (C) 2026 DoliResources - https://www.doliresources.com - Licence GPL-3.0-or-later. All rights to this development belong exclusively to DoliResources. The reference screenshots were used as a visual reference only: no third-party source code, proprietary logo, protected image or unlicensed icon has been reused.