Table of Contents
-
Introduction
-
What Are Dolibarr Themes?
-
Why Change the Theme?
-
Default Themes Available in Dolibarr
-
Activating a Theme from the User Interface
-
Setting a Default Theme for All Users
-
Customizing Theme Settings
-
Creating Your Own Theme
-
Modifying Existing Themes Safely
-
Directory Structure of a Dolibarr Theme
-
CSS and LESS in Dolibarr Themes
-
Adding Custom Logos and Branding
-
Theme Compatibility with Dolibarr Versions
-
Responsive Design Considerations
-
Using Community-Contributed Themes
-
Troubleshooting Theme Issues
-
Best Practices for Theming
-
Multicompany Theme Configuration
-
Security and Performance Considerations
-
Conclusion
1. Introduction
The user interface (UI) of Dolibarr plays a key role in usability, efficiency, and branding. Dolibarr supports multiple themes, and administrators or developers can switch, customize, or create entirely new visual styles. This guide walks you through the entire process of changing and managing themes within Dolibarr.
2. What Are Dolibarr Themes?
Themes in Dolibarr are collections of stylesheets (CSS/LESS) and images that define how the application looks. A theme controls:
-
Colors and fonts
-
Menu layout
-
Button styles
-
Backgrounds and icon sets
Each theme resides in the /htdocs/theme/
directory and can be selected at the user or system level.
3. Why Change the Theme?
Reasons include:
-
Visual customization to reflect company branding
-
Improving accessibility for certain users
-
Enhancing usability on different screen sizes
-
Aligning Dolibarr UI with other business tools
A better UI can increase staff efficiency and satisfaction.
4. Default Themes Available in Dolibarr
Common built-in themes include:
-
Oblyon (modern and responsive)
-
Eldy (classic and widely supported)
-
MD (Material Design-inspired)
Each theme is maintained to align with Dolibarr’s core updates.
5. Activating a Theme from the User Interface
To change the theme for a user:
-
Log in as the user
-
Go to Top Right Menu > Personal Settings
-
Under Display Options, select the preferred theme
-
Save changes and refresh the page
This change only affects the current user.
6. Setting a Default Theme for All Users
To apply a theme system-wide:
-
Log in as an administrator
-
Go to Setup > Display
-
Choose the default theme under Interface Options
-
Optionally disable theme selection to enforce consistency
Useful for branding or standardizing appearance across teams.
7. Customizing Theme Settings
Some themes like Oblyon offer configurable elements:
-
Sidebar collapse
-
Icon set selection
-
Font size and spacing
These can be adjusted from the user settings or via the admin panel if supported.
8. Creating Your Own Theme
Steps:
-
Copy an existing theme folder from
/htdocs/theme/
-
Rename it (e.g.,
mytheme
) -
Update
main.style.css.php
and image references -
Set the theme name in
theme.inc.php
Once in place, your theme appears in the dropdown list for selection.
9. Modifying Existing Themes Safely
To prevent issues:
-
Never edit core theme files directly
-
Instead, copy and override in a custom theme
-
Use browser dev tools to identify classes and selectors
Keep your modifications minimal for easier future upgrades.
10. Directory Structure of a Dolibarr Theme
Typical contents of a theme folder:
-
theme.inc.php
: metadata -
main.style.css.php
: main CSS logic -
img/
: folder for logos, icons -
style.css
: fallback or extended styles
Some themes use LESS for easier style management.
11. CSS and LESS in Dolibarr Themes
Dolibarr supports dynamic CSS generation:
-
main.style.css.php
builds styles using PHP variables -
LESS files can be compiled if your theme supports it
Advanced users can use variables to control color schemes, font sizes, etc.
12. Adding Custom Logos and Branding
To change logos:
-
Go to Setup > Company/Organization
-
Upload a new logo file
-
The logo will display in headers and PDF documents
For theme-specific logos, place them in the theme’s img/
directory and reference them in CSS.
13. Theme Compatibility with Dolibarr Versions
When upgrading Dolibarr:
-
Always test custom themes on staging first
-
Check for deprecated styles or new HTML structures
-
Review release notes for UI changes
Incompatible themes can cause display issues or broken layouts.
14. Responsive Design Considerations
Modern themes like Oblyon are mobile-friendly:
-
Test on different screen sizes
-
Use flexible widths and media queries
-
Avoid fixed pixel layouts for navigation bars
Ensure that tablets and smartphones display essential UI elements clearly.
15. Using Community-Contributed Themes
You can find themes on:
-
GitHub repositories
Before using a community theme:
-
Verify its compatibility with your version
-
Scan for unnecessary or unsafe scripts
-
Check for documentation and support options
16. Troubleshooting Theme Issues
Symptoms:
-
Blank pages or broken layouts
-
Missing icons or CSS not loading
Solutions:
-
Clear browser cache
-
Enable Developer Mode in Dolibarr
-
Check browser console for errors
-
Compare file permissions on server
17. Best Practices for Theming
-
Always work in a copy of an existing theme
-
Use version control (e.g., Git) to manage changes
-
Document your overrides for future updates
-
Test thoroughly in all major browsers
Keep design clean, readable, and consistent with business branding.
18. Multicompany Theme Configuration
If using the Multicompany module:
-
Each entity can be assigned its own theme
-
Useful for franchise models or subsidiaries
Configure this under Setup > Multicompany (when module is enabled).
19. Security and Performance Considerations
-
Minimize use of large background images or heavy fonts
-
Compress CSS files where possible
-
Avoid inline scripts that could pose XSS risks
-
Apply only necessary theme features to avoid bloat
20. Conclusion
Changing Dolibarr’s theme allows you to personalize the ERP interface for aesthetic, branding, or functional reasons. Whether you’re using a built-in theme, modifying an existing one, or developing a new design from scratch, understanding how themes work ensures smooth deployment and user satisfaction.