Discover powerful Dolibarr extensions designed to automate your business processes

CrmX is a Premium theme-module for Dolibarr ERP/CRM published by DoliResources. It replaces the standard Dolibarr chrome with a modern, responsive interface and ships eight complete, interchangeable demos in a single package. Switching demo repaints the navigation family, the palette, the hero band, the KPI card family, the dashboard layout and the login page in one request — with no re-installation and no data migration.
CrmX is delivered as a MODULE rather than as a plain CSS theme. A stylesheet alone can only recolour existing markup; it cannot build a profile sidebar, a horizontal mega-menu, a gradient hero band or a KPI dashboard. As a module, CrmX injects its own assets, supplies its own menu manager and renders its own dashboard, while leaving every file of the Dolibarr core untouched.
Every figure displayed on every dashboard is read from the customer's own Dolibarr data — invoices, orders, proposals, third parties, products, projects and agenda events. The eight demos differ in presentation only: switching demo never changes a number.
|
Item |
Value |
|
Commercial name |
CrmX |
|
Technical name |
theme_crmx |
|
Folder |
crmx |
|
Module id (numero) |
10000560 |
|
Version |
1.0.0 |
|
Package |
module_crmx-1.0.zip |
|
Demos |
8 (5 vertical, 3 horizontal) |
|
Languages |
English, French, Spanish, Italian, German (+ Dutch, Portuguese) |
|
Licence |
GPL-3.0-or-later |
|
Editor |
DoliResources |
CrmX is organised around a single source of truth: a preset engine that describes each demo as a complete set of design tokens. The stylesheet, the dashboard, the sidebar renderer, the horizontal navigation renderer and the configuration page all read that same engine, so the interface can never be half-repainted.
· Five demos use a VERTICAL sidebar: Classic, Analytics, eCommerce, Gradient Dashboard, Banking.
· Three demos use a HORIZONTAL menu bar: Horizontal Commerce, Horizontal Analytics, Horizontal Healthcare.
· Five demos paint a coloured hero band cut by a wave: Gradient, Banking and the three horizontal demos.
· Each demo owns a KPI card family, a dashboard layout and a login layout.
· An administrator may override any facet (palette, navigation family, hero band, layout, sidebar mode, header mode, font, radius, shadows, borders, animations) on top of the chosen demo.
· Reproduce the visual identity of the eight reference designs faithfully while shipping entirely original code and assets.
· Keep every screen driven by real Dolibarr data and by real Dolibarr permissions.
· Never modify a core file, so the theme survives a Dolibarr upgrade.
· Make the eight demos switchable at runtime, per entity and optionally per user.
· Stay usable at every viewport from a 4K desktop down to a 390 px phone.
· Keep the whole package light: no heavy chart library, no external runtime dependency.
Three principles guided the interface work, and each of them corresponds to a class of defect that was found and fixed during development:
· A figure and its decoration must tell the same story. Trend arrows encode the DIRECTION a figure actually moved; colour encodes whether that movement is DESIRABLE. A falling unpaid balance is therefore shown as a down arrow in green. Conflating the two produces a visual lie.
· A rate needs a real population. When a denominator is zero the interface prints 'n/a', never '0 %', because a zero rate reads as total failure rather than as 'nothing measured yet'.
· A chart must never plot the future. Series are cut to the elapsed months, so a curve does not dive to the floor for the remainder of the year and read as a collapse.
Deep navy rail with a large round avatar, the active entry set in a light rounded pill, a very light canvas and four sparkline KPI cards.
· Sidebar #242A56 with a profile block (avatar, full name, role) at the top
· Four centred sparkline KPI cards: revenue, orders, outstanding invoices, new customers
· Profit & Sales Overview: current year against previous year, with a four-cell summary strip
· Customer split donut with a three-figure legend
· Accent blue #4C7BF3, radius 12 px, Quicksand typeface
Light rail with uppercase section captions, a visitor histogram and multi-series revenue curves.
· Light sidebar, canvas #F5F6FA, primary #2536C4
· Compact statistic KPI cards with a coloured top rule
· Activity histogram comparing two populations
· Multi-series revenue curves with period filters
· Campaign rings and a quick-note panel
Light rail, four KPI cards with big solid circle icons, order summary bars, top products and the invoice table.
· Circle-icon KPI cards: orders received, new customers, total earnings, orders in progress
· Online / offline order summary bars
· Sales overview list and the blue revenue panel
· Top products and the invoice table with status pills
A wide orange-to-green hero band cut by a white wave, with four saturated full-bleed counter cards.
· Hero gradient #E09B12 → #6FA83A, cut by an SVG wave
· Four solid KPI cards with a translucent ghost glyph bleeding off the corner
· Cream sidebar #FFFDF7 so the rail does not fight the band
· Sales-difference area chart, sales histogram and revenue-by-line curves
An azure hero band, one wide financial overview card, the balance-history curve and treasury panels.
· Hero gradient #0E9BF0 → #1E6FD0
· Financial overview: total balance, credit available, due today, each with its own action link
· Balance-history area chart over the elapsed months
· Treasury panel listing the latest invoices with status pills
· IMPORTANT: no payment is ever executed by the theme. Every button is a link to the native Dolibarr page (payments, bank accounts, invoices).
A horizontal menu bar floating in a white rounded pill over the warm hero, with progress-bar KPI cards.
· Horizontal multi-level navigation with dropdown panels
· Four progress-bar KPI cards, every percentage clamped to 0–100 on both the bar and its label
· Commerce charts: order average and order processes
The same horizontal chrome with four analytic tiles over the earning-zone area chart.
· Conversion gauge built from the proposal win rate
· Customer distribution by town with share bars
· Daily sales bars on a square-root scale so one spike cannot flatten the rest
· Top-products donut with a legend list
The same horizontal chrome with six white icon tiles and activity charts.
· Six icon tiles: patients, encounters, appointments, lab & radiology, prescriptions, referrals
· GENERIC FALLBACK: a stock Dolibarr has no medical module, so each tile falls back to the equivalent native object (third parties, agenda events, orders, invoices, proposals) and the row is captioned to say so. It never errors and never shows a blank tile.
· The whole healthcare vocabulary can be switched off with CRMX_HIDE_HEALTH_TILES
· Overlapping revenue areas and a grouped activity histogram
The dashboard runs a single shared data layer and then includes one presentation file per demo (core/dashboards/<key>.php). A layout file never runs a query, which is what guarantees that switching demo changes the arrangement and never the figures. An unknown layout key falls back to Classic rather than rendering an empty page.
· Revenue for the period and for the year, against the previous period and previous year
· Outstanding customer invoices, in amount and in count
· Orders by status: draft, open, delivered
· Proposal pipeline and win rate
· New customers and prospects
· Upcoming agenda events
· Top customers with their town and revenue
· Native Dolibarr widget zone (add, hide, reorder — persisted per user by Dolibarr itself)
Eight KPI families ship with the theme, one per demo, and any of them may be forced independently of the active demo through CRMX_KPI_STYLE.
|
Family |
Demo |
Description |
|
spark |
Classic |
Centred label, large tinted figure, delta line, sparkline |
|
stat |
Analytics |
Compact figure with a coloured top rule |
|
circle |
eCommerce |
Figure on the left, large solid round icon on the right |
|
solid |
Gradient |
Full-bleed saturated card, white type, ghost glyph |
|
finance |
Banking |
Label, figure and an outlined action button |
|
progress |
H. Commerce |
Solid card with a clamped percentage bar |
|
tile |
H. Analytics |
Visual on top, large caption underneath |
|
icontile |
H. Healthcare |
Large glyph, grey pill caption, figure |
Each card can carry a title, a value, a period, a variation, an icon, a trend, a mini-chart, a badge and a full-card link to the matching Dolibarr list.
The sidebar is rendered from the NATIVE Dolibarr menu tree (print_eldy_menu / print_left_eldy_menu with output suppressed), so every module's entries, every permission check, every hook and every translation keep working. Nothing in the navigation is hard-coded.
· Profile block: avatar or initials, full name, role
· Live module filter (type to filter the navigation)
· Favourites, fed by the user's real Dolibarr bookmarks
· Navigation with in-place accordions and multi-level entries
· Live counter badges (unpaid invoices, open proposals, today's events) — a badge is absent when its module is disabled, so it is never a dead number
· Recently opened objects, recorded per session
· Active-module count widget and a collapse button
· Collapsed rail, hover expansion and a remembered state
· Off-canvas drawer below 760 px
The horizontal bar is fed by exactly the same native menu tree as the sidebar. It renders one entry per active module, and a module that owns sub-entries opens a multi-column dropdown panel grouped by its own level-0 headers.
A horizontal bar has a fixed height budget: one row. An instance with many modules would otherwise wrap it over twenty rows and push the whole page below the fold — this was observed on the test harness, which has about 180 active modules. CrmX therefore shows at most CRMX_TOPNAV_MAX entries (8 by default) and moves the remainder into a trailing 'More' panel. The ACTIVE module is always promoted into the visible set, so the current section is never hidden behind 'More'.
· Multi-level dropdown panels, laid out in up to four columns
· Permission-aware: entries are filtered before the visible/overflow split
· Keyboard accessible: aria-haspopup and aria-expanded, Enter/Space/ArrowDown open a panel, Escape closes it
· Hover reveal on pointer devices, tap-to-open on touch and on narrow screens
· Below 1100 px the same markup becomes a stacked accordion — there is only ever one DOM
The native Dolibarr login block (global search, entity selector, print, help, user menu) is preserved and restyled rather than replaced, so multi-company and every module that decorates the top bar keep working.
· Menu toggle and full-screen control
· Global search with a Ctrl/Cmd+K shortcut
· Messages and agenda counters, computed live through a hook rather than baked into the cached JS
· Avatar and user menu, language and entity selectors
· Settings shortcut and a dark-mode toggle
· Styles: light, dark, transparent, gradient, floating, compact
A dedicated search page (crmx/search.php) queries third parties, contacts, users, products and services, proposals, orders, invoices, payments, projects, tasks, events and documents, subject to the current user's rights. Results are grouped by category and show an icon, a reference, a label, a status and a direct link, with the search term highlighted.
CrmX reuses Dolibarr's own 'boxes' system for the widget zone, which means the add selector, the hide control and drag-and-drop reordering all work and are persisted per user by the core. On a user's first visit the zone is seeded with a sensible default set so the selector appears. The whole zone can be hidden with CRMX_HIDE_CORE_BOXES.
Charts are hand-drawn inline SVG. There is no charting library to download, no runtime dependency and no external request, which keeps the package light and the pages fast.
· Smoothed line and area curves, histograms, stacked and grouped bars
· Donuts, rings, gauges and sparklines
· Legends, period selectors and value chips
· Series are cut to the elapsed months so no chart plots the future
· Very uneven ERP data is drawn on a square-root scale where a single spike would otherwise flatten every other bar
· Rounded-rectangle radii stay small under preserveAspectRatio="none", because a large radius is stretched into an ellipse
· Every chart follows the active palette and the dark mode
Standard Dolibarr lists are restyled rather than rebuilt, so sorting, filtering, pagination, mass actions, exports and the column selector keep their native behaviour.
· Clear headers, comfortable row rhythm, hover feedback
· Status badges and quick actions
· Horizontal scroll inside the table container, so the page body never scrolls sideways
· Compact and comfortable densities
· Card-style stacking on small screens
Text, numeric, date and time fields, selects, autocompletes, textareas, checkboxes, radios, switches, uploads and currency fields are restyled while keeping every native Dolibarr mechanism, including CSRF tokens, mandatory-field marking and server-side validation messages.
The sign-in screen is rendered before a session exists, so there is no localStorage and no pre-paint script yet: the demo is resolved SERVER-SIDE from the stored configuration. This is the one place in the theme where the administrator's stored default is authoritative, which is exactly the right behaviour for a shared sign-in page.
|
Variant |
Demos |
Description |
|
centered |
Classic |
Centred card with a gradient rule across the top |
|
split |
Analytics |
Full-height coloured panel on the left, form on the right |
|
card |
eCommerce |
Gradient fills the page, the card floats on top |
|
gradient |
Gradient, Banking, and the three horizontal demos |
The demo's own hero band, cut by the same wave as the application, with the card astride the cut |
The theme was verified at 1600 px (desktop), 834 px (tablet) and 390 px (phone) on every demo.
· The vertical sidebar becomes an off-canvas drawer with a backdrop below 760 px
· The horizontal bar collapses into a stacked accordion below 1100 px, reusing the same markup
· The top bar simplifies; cards stack; charts rescale; tables scroll inside their own container
· Grid tracks use minmax(0,1fr) where a track must be able to shrink — minmax(300px,1fr) cannot go below 300 px and is a common cause of horizontal overflow
· Touch targets stay large enough on coarse pointers
Dark mode is a real dark surface family, not a tinted light one. A warm hue laid at low opacity over navy turns brown, so in dark mode tinted tiles take the card surface and the colour moves into the icon pill instead.
· Applies to the sidebar, the horizontal bar, the top bar, the canvas, cards, widgets, tables, forms, charts, modals, dropdowns and the sign-in page
· Toggled from the top bar, from the configuration, or defaulted per demo
· The user's own choice always wins over the demo default, so the toggle keeps working inside any demo
· The state is applied on <html> before the first paint, so a reload never flashes the wrong theme
A single configuration screen (Home → Setup → Modules → CrmX) groups every setting.
|
Group |
Settings |
|
Demo |
Demo (8), palette (10), navigation family, hero band, KPI family, dark by default, per-user demo |
|
Appearance |
Primary, accent, success, danger and warning colours; font (7 stacks); radius; base font size; web-font loading |
|
Layout |
Layout (fluid, boxed, compact, comfortable, two columns, floating, full width); sidebar mode; header mode; shadow scale; borders; grid gap; animations; RTL |
|
Menu |
Rail width, profile block, badges, call-to-action, favourites, recents and their cap, top actions |
|
Dashboard |
Disable the dashboard, hide the native widget zone, annual target, revenue basis (incl./excl. tax), include abandoned invoices |
A demo gallery paints one swatch card per demo using that demo's own colours, and a Preview link opens the dashboard with ?crmxdemo=<key> so the eight demos can be compared without touching the stored configuration.
Import and export: the whole configuration can be exported as JSON and replayed on another instance. Every imported value is validated against the same definition that renders the form, so an unknown key is ignored and an out-of-range value falls back to its default. A crafted file cannot write an arbitrary constant.
· The demo, palette and every facet are stored per ENTITY, so a multi-company instance can dress each entity differently
· With CRMX_DEMO_PERUSER enabled, each user keeps their own demo while the entity keeps a default
· Dark mode, the collapsed rail and the last opened section are remembered per browser
· Favourites, recents and the widget zone are persisted per user by Dolibarr itself
· Every preference survives a reconnection
· Navigation landmarks with aria-label; aria-haspopup and aria-expanded on every dropdown opener
· Full keyboard operation of the horizontal menu: Enter, Space, ArrowDown open a panel, Escape closes it and an outside click dismisses it
· Visible focus rings on links, menu entries and form fields
· Status is never conveyed by colour alone: a badge carries its label, a trend carries its arrow
· prefers-reduced-motion is honoured — every transition and the card hover lift are disabled
· Touch targets sized for coarse pointers
Reported honestly: a full WCAG 2.1 AA audit with assistive technology has not been performed. The points above were implemented and verified by inspection and by keyboard, not by a screen-reader test campaign.
· One dynamic stylesheet and one dynamic script, both cached with a revision key that a configuration change bumps, so a new look reaches users on a normal reload
· While a demo PREVIEW is active the stylesheet is served no-store. This is not a detail: the stylesheet URL is identical for every demo, so with a long cache the browser reused the first demo's sheet for every later one and the palette, the sidebar surface and the hero band stayed on demo #1 while the markup repainted
· Vary: Cookie, so a shared cache can never hand one user's demo to another
· Charts are inline SVG: no charting library, no external request
· Menu badge counters are memoised per request
· The horizontal bar builds sub-menus only for the entries it actually renders
· Every navigation entry comes from the native menu tree and is therefore already permission-filtered
· All output is escaped with dol_escape_htmltag()
· The configuration form uses Dolibarr's CSRF token; the import is validated field by field against the form definition
· The dashboard layout key is sanitised before it is used to build an include path, and an unknown key falls back to a known file
· Layout files refuse to execute unless included by the dashboard (CRMX_DASH guard)
· The Banking demo executes no payment whatsoever: every control is a link to the corresponding native Dolibarr page
· No secret, no credential and no external endpoint is embedded in the theme
· No core file is modified
· module_parts injects the stylesheet and the script on every page
· MAIN_MENU_*_FORCED installs the CrmX menu manager, which renders either the sidebar or the horizontal bar depending on the active demo
· Hooks: main (landing redirect), addHtmlHeader (pre-paint state), toprightmenu (live counters), searchform
· The native login block, the multi-company selector and the native widget system are preserved
· getEntity() is honoured on every query, so multi-entity instances stay correctly partitioned
The descriptor declares a minimum of Dolibarr 16.0 and PHP 7.0. Development and live verification were carried out on Dolibarr 17.0.3 with PHP 8, on an instance carrying about 180 active third-party modules — a deliberately hostile environment for a theme.
Compatibility with Dolibarr 20 and 21 is expected because CrmX uses only public, stable mechanisms (module_parts, the menu-manager contract, the documented hooks) and modifies no core file. It has NOT been executed on 20 or 21 in this cycle; that verification is listed in the validation report as not performed.
Verified: Chromium/Google Chrome (headless, current build) at 1600 px, 834 px and 390 px on all eight demos.
Not executed in this cycle: Firefox, Safari and Microsoft Edge, and the Windows, Android and iOS platforms. The theme uses only widely supported CSS (custom properties, grid, flexbox, CSS masks with the -webkit- prefix supplied) and no vendor-specific JavaScript, but that is a reasoned expectation and not a test result. The manual procedure is given in the validation report.
|
Layer |
File |
Role |
|
Preset engine |
core/crmx_presets.php |
The eight demos as design tokens; the single source of truth |
|
Descriptor |
core/modules/modCrmX.class.php |
Activation, constants, forced menu manager |
|
Menu manager |
core/menus/standard/crmx_menu.php |
Chooses the sidebar or the horizontal bar |
|
Renderers |
core/menus/standard/crmx.lib.php |
crmxPrintSidebar() and crmxPrintTopnav() |
|
Stylesheet |
css/crmx.css.php |
One sheet, tokenised per demo |
|
Script |
js/crmx.js.php |
Theme, collapse, filter, dropdowns, mobile |
|
Dashboard |
index.php + core/dashboards/*.php |
One data layer, eight presentations |
|
Hooks |
class/actions_crmx.class.php |
Landing redirect, pre-paint state, counters |
|
Configuration |
admin/setup.php |
Settings, gallery, JSON import/export |
crmx/
admin/setup.php
class/actions_crmx.class.php, crmx_demo.class.php
core/crmx_presets.php
core/dashboards/ (README.md + 8 layouts)
core/menus/standard/crmx_menu.php, crmx.lib.php
core/modules/modCrmX.class.php
css/crmx.css.php
js/crmx.js.php
langs/{en_US,fr_FR,es_ES,it_IT,de_DE,nl_NL,pt_BR}/crmx.lang
index.php, search.php, README.md, CHANGELOG.md
Requirements: Dolibarr 16.0 or later (developed and verified on 17.0.3), PHP 7.0 or later (verified on PHP 8), and the ability to install external modules.
· Home → Setup → Modules → Deploy/install external module
· Upload module_crmx-1.0.zip and confirm
· Enable CrmX in the module list. The theme installs its own menu manager automatically
· Open the CrmX configuration (the cog on the module line) and pick a demo
· Alternative manual install: unzip into htdocs/custom/ so the folder is htdocs/custom/crmx, then enable the module
No database table is created and no core file is touched. Uninstalling removes the theme's constants and restores the previous menu manager.
· Install the new package over the previous one; settings are preserved
· The descriptor bumps MAIN_IHM_PARAMS_REV when the version changes, so users receive the new stylesheet and script on a normal reload rather than needing a hard refresh
· Export your configuration to JSON before a major upgrade if you want a guaranteed rollback point
· Palette: pick one of the ten palettes, or choose 'Custom' and set the primary and accent colours. Every derived surface — sidebar active state, hero band, KPI tint, login gradient — follows, so no token is left pointing at the previous demo's colour
· Shape: radius, shadow scale, borders and grid gap
· Typography: seven font stacks, base size, and an option to disable web-font loading for offline instances
· Navigation: force a vertical rail or a horizontal bar on any demo; adjust the rail width; cap the number of top-level entries with CRMX_TOPNAV_MAX
· Deeper changes: core/crmx_presets.php is a plain PHP library with no side effects. Adding a ninth demo means adding one entry there and one layout file under core/dashboards/
All user-facing strings go through Dolibarr's translation system. The theme ships 371 keys in seven languages: English, French, Spanish, Italian, German, Dutch and Portuguese (Brazil). The five languages required by the specification are all present.
· Every key is prefixed with 'Crmx'. Dolibarr merges all active modules' language files into one table, and header rendering loads other modules' files after the page's own, so an unprefixed generic key silently renders another module's wording. A scan across 184 third-party language files on the test instance found ZERO colliding keys
· A key-existence check verifies that every key referenced in PHP exists in the language file; only genuine Dolibarr core keys are expected to be absent
· The seven language files are verified to carry an identical key set, so no language can silently rot
128 screenshots are supplied, 16 per demo, in Screenshots/<Demo>/. They were captured on a live Dolibarr 17.0.3 carrying real business data (4,196 third parties, 1,989 invoices, 1,276 proposals, 1,844 products), at a 2× device pixel ratio.
|
File |
Content |
|
00-login |
Sign-in page for that demo |
|
01-dashboard |
Main dashboard |
|
02-thirdparties |
Third-party list |
|
03-customer-card |
Customer card |
|
04-products |
Products and services |
|
05-proposals |
Proposals |
|
06-orders |
Sales orders |
|
07-invoices |
Customer invoices |
|
08-invoice-card |
Invoice card |
|
09-projects |
Projects |
|
10-agenda |
Agenda |
|
11-theme-config |
CrmX configuration with the demo gallery |
|
12-global-search |
Global search results |
|
13-dark-mode |
Dashboard in dark mode |
|
14-tablet |
Dashboard at 834 px |
|
15-mobile |
Dashboard at 390 px |
No screenshot contains personal or sensitive data beyond the demonstration dataset of the test instance.
· Eight complete demos in one package, switchable at runtime with no re-installation
· Both navigation families — vertical rail and horizontal mega-menu — from the same native menu tree
· Every figure read from the customer's own Dolibarr data, under the customer's own permissions
· No core file modified, so a Dolibarr upgrade cannot break the theme
· No charting library and no external runtime dependency: the package is 165 KB
· Seven languages, zero language-key collisions
· Multi-entity aware, with optional per-user demos
· Configuration export and import as validated JSON
Stated plainly, so expectations are accurate:
· Browser verification covered Chromium only. Firefox, Safari and Edge, and the Windows, Android and iOS platforms, were NOT executed in this cycle
· Live execution was carried out on Dolibarr 17.0.3. Dolibarr 20 and 21 were NOT executed
· No WCAG 2.1 AA audit with assistive technology was performed; accessibility work was verified by inspection and by keyboard only
· The horizontal bar shows at most CRMX_TOPNAV_MAX top-level modules (8 by default) and moves the rest into a 'More' panel. This is a deliberate design decision, not an unlimited mega-menu
· The Healthcare demo has no medical module to read from on a stock Dolibarr; it falls back to native objects and says so on screen
· The Banking demo deliberately performs no financial operation: every control links to the native Dolibarr page
· Year-over-year charts plot the previous year on the same scale as the current one. When the previous year is a small fraction of the current one, its curve legitimately reads as a flat line near the axis; this is the honest comparison, not a rendering fault
· Drag-and-drop reordering and resizing of dashboard widgets is provided by Dolibarr's native box system, not reimplemented by the theme
· Per-user demo selection exposed directly in the user card
· A ninth demo and additional KPI families
· Optional geographic map widget when third-party coordinates are available
· Saved dashboard presets per role
· A formal WCAG audit and a cross-browser test campaign
CrmX is published and maintained by DoliResources.
|
Channel |
Detail |
|
Editor |
DoliResources |
|
Website |
https://www.doliresources.com |
|
Package |
module_crmx-1.0.zip |
|
Version |
1.0.0 |
|
Licence |
GPL-3.0-or-later |
|
Copyright |
DoliResources |
Bug reports should state the Dolibarr version, the PHP version, the active demo, the browser and, where the issue is visual, a screenshot. A configuration export (JSON) attached to the report reproduces the exact look on the maintainer's side.