Table of Contents

  1. Introduction

  2. What is the Oblyon Theme?

  3. Why Choose Oblyon for Your Dolibarr Interface?

  4. Installing the Oblyon Theme

  5. Activating and Configuring Oblyon

  6. Understanding the Structure of the Theme

  7. Customizing Colors and Fonts

  8. Modifying Layout and Navigation

  9. Branding the Login and Home Pages

  10. Using Custom CSS with Oblyon

  11. Integrating Company Logos and Visual Identity

  12. Responsive Design and Mobile Optimization

  13. Managing Updates to Oblyon

  14. Compatibility with Modules and Extensions

  15. Advanced Customization Using Template Overrides

  16. Performance Considerations

  17. Security and UI Customization

  18. Community Feedback and Use Cases

  19. Best Practices for UI Design in ERP Systems

  20. Conclusion and Strategic Recommendations

1. Introduction

Dolibarr is an open-source ERP and CRM solution designed for businesses of all sizes. One of its key strengths is its modularity and flexibility, which extends to its user interface (UI). Among the various themes available, Oblyon is one of the most popular and visually appealing. This article explores how to fully customize the Dolibarr UI using the Oblyon theme to create a user-centric, branded, and intuitive experience.

2. What is the Oblyon Theme?

Oblyon is a modern, responsive theme designed to enhance the visual experience of Dolibarr users. It replaces the standard interface with a cleaner, more professional layout, supporting mobile responsiveness and better usability.

Features include:

  • Flat design and icon-based menus

  • Improved sidebar navigation

  • Mobile and tablet compatibility

  • Clean typography and spacing

  • Support for white-labeling and custom branding

3. Why Choose Oblyon for Your Dolibarr Interface?

Oblyon is ideal for businesses that want:

  • A professional look for client-facing interfaces

  • Easier navigation for non-technical users

  • A responsive design across all devices

  • Visual consistency with their brand

Its flexibility and compatibility with most Dolibarr modules make it a go-to choice.

4. Installing the Oblyon Theme

To install Oblyon:

  1. Download the theme from Dolistore or GitHub.

  2. Upload it to the /theme/ directory in your Dolibarr installation.

  3. Go to "Home > Setup > Display"

  4. Select "Oblyon" from the list of available themes.

  5. Save and reload the page.

Check for compatibility with your Dolibarr version before installation.

5. Activating and Configuring Oblyon

Once activated:

  • Navigate to "Home > Setup > Display"

  • Choose Oblyon in the theme selector

  • Enable additional UI preferences: compact view, fixed top menu, etc.

  • Use the "Oblyon Config" module (if installed) to manage advanced settings

6. Understanding the Structure of the Theme

Key components:

  • style.css: Main stylesheet

  • tpl/: Template files for different pages

  • img/: Icons and logos

  • theme_vars.inc.php: Contains theme variables

Familiarity with these files is useful for deeper customization.

7. Customizing Colors and Fonts

To change colors:

  • Edit style.css or use a custom CSS override

  • Update variables like --color-primary, --color-secondary

For fonts:

  • Load web fonts in the <head> section

  • Apply to body or headings using CSS selectors

Use consistent branding colors to improve UI cohesion.

8. Modifying Layout and Navigation

Layout customizations include:

  • Rearranging menus via CSS or JS overrides

  • Adding fixed headers or footers

  • Changing sidebar behavior (collapsed/expanded by default)

Advanced users can edit tpl/mainmenu.tpl.php and tpl/topmenu.tpl.php for menu logic.

9. Branding the Login and Home Pages

Login page customizations:

  • Replace img/login_background.jpg with a custom image

  • Modify login.tpl.php to adjust layout

  • Add company logo and welcome text

Home page:

  • Customize dashboard widgets

  • Display announcements or user-specific metrics

10. Using Custom CSS with Oblyon

Best practice:

  • Create custom.css and include it via the theme or an external module

  • Avoid modifying core style.css to ensure update compatibility

  • Use browser developer tools to identify selectors

11. Integrating Company Logos and Visual Identity

Steps:

  • Replace logo files in /theme/oblyon/img/

  • Update theme_vars.inc.php to reflect new image paths

  • Match color palette with your company brand guide

Ensure mobile versions of the logo are also optimized.

12. Responsive Design and Mobile Optimization

Oblyon adapts to:

  • Different screen sizes using media queries

  • Mobile navigation with collapsible menus

  • Touch-friendly buttons and inputs

Test changes on multiple devices to confirm responsiveness.

13. Managing Updates to Oblyon

When updating Dolibarr:

  • Check Oblyon compatibility notes

  • Backup theme files before upgrades

  • Keep a changelog of customizations for easy reapplication

Use Git or version control to manage theme updates.

14. Compatibility with Modules and Extensions

Oblyon is compatible with most Dolibarr modules. However:

  • Some modules may require style adjustments

  • Use conditional CSS for specific module pages

  • Test UI integration after adding third-party extensions

15. Advanced Customization Using Template Overrides

You can override templates by:

  • Copying core templates to a custom folder

  • Adjusting logic in PHP + Smarty syntax

  • Assigning new variables for display via hooks

Example: Modify invoice or proposal templates to include branding or layout changes.

16. Performance Considerations

Avoid heavy themes or graphics that:

  • Slow down page load

  • Affect mobile performance

  • Increase CPU usage

Optimize images and minimize CSS/JS for better performance.

17. Security and UI Customization

Ensure:

  • Uploaded assets are secure and not accessible publicly

  • JS or HTML changes do not expose vulnerabilities

  • File permissions are set properly in theme directories

Use HTTPS for all assets.

18. Community Feedback and Use Cases

Oblyon is used by:

  • Freelancers

  • Agencies managing clients

  • SMEs looking for a sleek ERP UI

Many share their experiences on Dolibarr forums and GitHub, offering tips and custom forks.

19. Best Practices for UI Design in ERP Systems

  • Prioritize readability over aesthetics

  • Minimize cognitive load with clear labels

  • Use consistent navigation across pages

  • Highlight actions and alerts

UI should support, not distract from, productivity.

20. Conclusion and Strategic Recommendations

Customizing Dolibarr with the Oblyon theme enables organizations to deliver a more professional and intuitive user experience. Whether for internal teams or client portals, Oblyon provides a robust foundation for UI personalization.

Use modular overrides, custom CSS, and responsive best practices to tailor the interface to your brand. Always document changes, test for updates, and prioritize user experience over excessive customization. With the right balance, Dolibarr becomes not just an ERP platform—but a seamless extension of your business identity.