¿Te encanta Dolibarr pero sientes que su diseño se quedó en el pasado? A muchos nos pasa. La interfaz por defecto es funcional, pero a veces no es del gusto de todos. Por eso, quiero compartir con la comunidad de Dolibarr una hoja de estilos CSS que creamos para mejorar el diseño de Dolibarr y darle un aspecto más moderno y profesional.
Con esta sencilla configuración de CSS, podrás darle un aire fresco a tu ERP sin necesidad de ser un experto. Simplemente agrega el código y ¡listo! Tendrás botones redondeados, un diseño más fluido y una interfaz más limpia y agradable.
Mi objetivo con este aporte es ayudar a crear una comunidad más fuerte en Latam, compartiendo soluciones gratuitas que nos ayuden a todos. Si eres administrador de sistemas o un usuario de Dolibarr que busca cambiar la estética del ERP, esta es la solución perfecta.
Para probar este diseño solo ingresa en tu instancia de Dolibarr a:
Configuración -> Entorno -> Estilo CSS
Coloca el siguiente código:


/* =================================================================
 VERSIÓN FINAL v1 - MODERNIZACIÓN COMPLETA (POR IDOO)
 ================================================================= */

/* =================================================================
 1-6. ESTILOS GENERALES, FICHA, PESTAÑAS, BOTONES, MENÚ
 ================================================================= */
body {
 background: linear-gradient(135deg, #f5f7fa 0%, #e0eafc 100%) !important;
 font-family: Arial, sans-serif;
}
.fiche {
 border-radius: 16px !important; border: none !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; padding: 25px !important; margin-top: 20px !important; background-color: #ffffff !important;
}
.fiche .fichetitre {
 background: none !important; border-bottom: 2px solid #eee !important; padding-bottom: 15px !important; margin-bottom: 20px !important;
}
.tabs { border-bottom: none !important; }
.tabs a, .tabs span {
 border: none !important; border-radius: 8px !important; padding: 10px 15px !important; margin-right: 5px !important; background-color: #f0f4f8 !important; color: #555 !important; transition: all 0.3s ease; border-top: none !important;
}
.tabs a.tabactive, .tabs span.tabactive, .tabs a.selected, div.tabBar > a.selected, .tab.tabactive a {
 background-color: #5E83BA !important; color: #ffffff !important; font-weight: bold; border-top: none !important; box-shadow: 0 2px 5px rgba(94, 131, 186, 0.3);
}
.tabs a:not(.tabactive):hover {
 background-color: #dbe4f0 !important; color: #333 !important;
}
textarea {
 background-color: #fdfdff !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; padding: 15px !important; font-family: 'Courier New', Courier, monospace !important; font-size: 14px !important; box-shadow: none !important; transition: border-color 0.3s, box-shadow 0.3s;
}
textarea:focus {
 outline: none; border-color: #5E83BA !important; box-shadow: 0 0 0 3px rgba(94, 131, 186, 0.2) !important;
}
.button, input[type="submit"], input[type="button"], a.butAction, a.butActionDelete, span.butActionDelete, #action-clone {
 border: none !important; border-radius: 50px !important; padding: 12px 25px !important; font-weight: bold !important; cursor: pointer; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); text-decoration: none !important; display: inline-block; vertical-align: middle;
}
.button, input[type="submit"], a.butAction, #action-clone {
 background-color: #5E83BA !important; color: #ffffff !important;
}
.button:hover, input[type="submit"]:hover, a.butAction:hover, #action-clone:hover {
 background-color: #4A6B9A !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); color: #ffffff !important;
}
input[type="button"].button, .button.butActionRefused, .box .button {
 background-color: #f0f0f0 !important; color: #555 !important; border: 1px solid #ddd !important;
}
input[type="button"].button:hover, .button.butActionRefused:hover, .box .button:hover {
 background-color: #e0e0e0 !important; border-color: #ccc !important;
}
a.butActionDelete, .butActionRefused, span.butActionDelete { background-color: #dc3545 !important; color: #ffffff !important;}
a.butActionDelete:hover, .butActionRefused:hover, span.butActionDelete:hover { background-color: #c82333 !important; color: #ffffff !important;}
.divButAction { text-align: center; padding-top: 10px; }
#mainmenua_left {
 background-color: #f8f9fa !important; border-right: 1px solid #e9ecef !important;
}


/* =================================================================
 7. TABLAS Y LISTAS
 ================================================================= */
.div-table-responsive, .div-table-responsive-no-min {
 background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px !important; margin-top: 20px; overflow: hidden;
}
.liste_titre_filter {
 background-color: transparent !important; border: none !important; padding: 0 0 20px 0 !important; margin-bottom: 0 !important;
}
.tagtable, .liste {
 width: 100% !important; border-collapse: collapse !important; border-style: hidden !important; background-color: transparent !important;
}
.tagtable .liste_titre th, .liste .liste_titre th {
 text-align: left !important; padding: 15px 10px !important; font-weight: bold !important; color: #5E83BA !important; border-bottom: 2px solid #dee2e6 !important; background: none !important; font-size: 13px;
}
.tagtable tr.oddeven, .liste tr.oddeven {
 background-color: #ffffff !important; border-bottom: 1px solid #e9ecef !important; transition: background-color 0.2s ease;
}
.tagtable tr.oddeven:last-child, .liste tr.oddeven:last-child {
 border-bottom: none !important;
}
.tagtable tr.oddeven td, .liste tr.oddeven td {
 padding: 10px 5px !important; vertical-align: middle !important;
}
.tagtable tr.oddeven:hover, .liste tr.oddeven:hover {
 background-color: #eff6ff !important;
}
.liste_total td {
 background-color: #e9ecef !important; font-weight: bold !important; color: #343a40 !important; border-top: 2px solid #dee2e6 !important; padding: 15px 10px !important;
}
.statusref {
 border-radius: 50px !important; padding: 5px 12px !important; font-size: 12px !important; font-weight: bold !important; text-align: center; color: #fff; min-width: 80px; display: inline-block;
}
.status0 { background-color: #6c757d !important; color: #ffffff !important; }
.status1 { background-color: #ffc107 !important; color: #3d3301 !important; }
.status4, .status6 { background-color: #28a745 !important; color: #ffffff !important; }
.status-1, .status5 { background-color: #dc3545 !important; color: #ffffff !important; }

/* =================================================================
 8. CAJAS DE CONTENIDO
 ================================================================= */
.box {
 background-color: #ffffff !important; border: 1px solid #e9ecef !important; border-radius: 12px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; margin-top: 25px !important; overflow: hidden;
 box-sizing: border-box !important;
}
.box_titre, .box .titre {
 background: none !important; border-bottom: 1px solid #eee !important; padding: 15px 20px !important; font-size: 14px !important; font-weight: bold !important; color: #5E83BA !important;
}

/* =================================================================
 9. LAYOUT DE COLUMNAS
 ================================================================= */
.fichecenter, .twocolumns {
 display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important;
}
div.fichehalfleft, div.fichehalfright {
 flex-basis: 49% !important; width: 49% !important; float: none !important; box-sizing: border-box !important; margin: 0 !important;
}
.fichecenter > .twocolumns {
 flex-basis: 100% !important; width: 100% !important;
}
td.right { color: #343a40 !important; font-weight: 500; }
.tabBar .badge, .tabs .badge, .badge.nbtab { color: #5E83BA !important; background-color: #ffffff !important; font-weight: bold !important; }

/* =================================================================
 10. ESTILOS PARA ELEMENTOS ESPECÍFICOS (Select2, etc.)
 ================================================================= */
.select2-container--default .select2-selection--single {
 background-color: #f7f7f7 !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
 line-height: 40px !important; padding-left: 15px !important; color: #333 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
 height: 40px !important; right: 5px !important;
}
.select2-dropdown {
 border-radius: 12px !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}
.fiche .tabBar .badge-status {
 border-radius: 50px !important; padding: 6px 15px !important; font-size: 14px !important; font-weight: bold !important;
}
.fiche .tabBar .badge-status0 { background-color: #6c757d !important; color: #ffffff !important; }
.fiche .tabBar .badge-status1 { background-color: #ffc107 !important; color: #3d3301 !important; }
.fiche .tabBar .badge-status4, .fiche .tabBar .badge-status6 { background-color: #28a745 !important; color: #ffffff !important; }
.fiche .tabBar .badge-status-1, .fiche .tabBar .badge-status5 { background-color: #dc3545 !important; color: #ffffff !important; }
.table-fiche-title { border-bottom: 1px solid #eee !important; margin-top: 0px; padding-bottom: 10px; }
.table-fiche-title .titre { font-size: 14px !important; font-weight: bold !important; color: #5E83BA !important; }
.table-fiche-title + .div-table-responsive-no-min { margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: none !important; }
.urllink input[type="text"] { width: calc(100% - 40px) !important; padding: 12px 15px !important; border: 1px solid #e0e0e0 !important; background-color: #f7f7f7 !important; border-radius: 12px !important; font-size: 14px; color: #333 !important; box-shadow: none !important; display: inline-block; vertical-align: middle; }
.urllink a { padding: 10px; vertical-align: middle; }

/* =================================================================
 11. ÍCONOS DEL MENÚ SUPERIOR
 ================================================================= */
#id-top .mainmenu span.fas {
 font-weight: 400 !important; font-size: 1.3em !important;
}
#id-top .tmenusel .mainmenu span.fas {
 font-weight: 900 !important;
}
#id-top #mainmenutd_menu .mainmenu span.fas {
 font-weight: 400 !important;
}

/* =================================================================
 12. MENÚ LATERAL
 ================================================================= */
.vmenu {
 padding: 15px 10px !important;
}
.blockvmenu {
 margin-bottom: 10px !important;
 border-bottom: 1px solid #e9ecef;
 padding-bottom: 10px;
}
.blockvmenulast {
 border-bottom: none;
}
.menu_titre a.vmenu {
 font-weight: bold !important; color: #343a40 !important; font-size: 1em !important; padding: 8px 10px !important; display: flex; align-items: center; margin-bottom: 5px;
}
.menu_titre a.vmenu .fas {
 font-size: 1.1em; margin-right: 8px; width: 20px; text-align: center;
}
.menu_contenu {
 /* V4 CORRECCIÓN: Usamos Flexbox para la alineación vertical perfecta */
 display: flex !important;
 align-items: center !important;
 margin: 0 0 2px 0 !important; /* Espacio solo abajo */
 padding: 0 !important;
 border-radius: 6px;
 transition: background-color 0.2s ease-in-out;
}
/* Ocultamos el 
 que causa el espacio extra */
.menu_contenu > br {
 display: none !important;
}
.menu_contenu a.vsmenu {
 flex-grow: 1; /* El enlace ocupa todo el espacio disponible */
 padding: 9px 15px !important;
 color: #495057 !important;
 text-decoration: none !important;
 font-size: 0.9em;
 display: inline-block !important; /* Cambiamos a inline-block */
}
.menu_contenu:hover {
 background-color: #e9ecef !important;
}
.menu_contenu:hover a.vsmenu {
 color: #000 !important;
}
.menu_contenu.active, .menu_contenu_sel {
 background-color: #5E83BA !important;
 box-shadow: 0 4px 12px rgba(94, 131, 186, 0.4);
}
.menu_contenu.active a.vsmenu, .menu_contenu_sel a.vsmenu {
 color: #ffffff !important;
 font-weight: bold !important;
}

/* =================================================================
 13. NUEVO: ESTILO PARA GRÁFICAS Y WIDGETS DEL DASHBOARD
 ================================================================= */

.box, .boxstats {
 background-color: #ffffff !important;
 border: 1px solid #e9ecef !important;
 border-radius: 12px !important;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
 margin-top: 25px !important;
 overflow: hidden;
 box-sizing: border-box !important;
}

/* Títulos de las cajas de gráficas */
.box_titre, .box .titre, .liste_titre {
 background: none !important;
 border-bottom: 1px solid #eee !important;
 padding: 15px 20px !important;
 font-size: 14px !important;
 font-weight: bold !important;
 color: #5E83BA !important;
}

/* --- Estilos específicos para las gráficas --- */
/* Centramos la gráfica y le damos algo de aire */
.dolgraphchart {
 padding: 20px;
}

/* Mejoramos la leyenda de la gráfica (Chart.js) */
.chartjs-legend ul {
 padding-left: 15px !important;
}

.chartjs-legend li {
 color: #495057 !important;
 font-size: 13px !important;
}

/* Hacemos que los cuadraditos de color de la leyenda sean redondeados */
.chartjs-legend li span {
 border-radius: 4px !important;
}

/* --- Barra de resumen debajo de la gráfica (ej. "Número total de terceros") --- */
.boxstats .liste_total td {
 background-color: #f8f9fa !important; /* Un gris muy claro */
 font-weight: bold !important;
 color: #343a40 !important;
 border-top: 1px solid #e9ecef !important;
 padding: 15px 20px !important;
}

/* Contenedores de los KPIs superiores (Facturas, Proyectos, etc.) */
.box-flex-container {
 gap: 15px !important; /* Espacio entre las tarjetas de KPI */
}
.box-flex {
 border-radius: 12px !important;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
 border: 1px solid #e9ecef !important;
 padding: 15px !important;
}


/* Esta regla apunta a la 'caja' que contiene la pestaña activa
 y elimina el borde superior que causa la barra azul. */
.tab.tabactive, .tabsElemActive {
 border: none !important;
 border-top: none !important;
}

/* =================================================================
 15. RESPONSIVIDAD PARA MÓVILES (Adaptación de Columnas)
 ================================================================= */

@media (max-width: 768px) {

 /* --- Columnas --- */
 /* Cuando la pantalla es estrecha, hacemos que cada columna ocupe el 100% del ancho */
 div.fichehalfleft,
 div.fichehalfright {
 flex-basis: 100% !important;
 width: 100% !important;
 margin-bottom: 20px !important; /* Añadimos espacio entre las cajas apiladas */
 }

 /* --- Tarjeta Principal --- */
 /* Reducimos el padding en la tarjeta principal para dar más espacio al contenido */
 .fiche {
 padding: 15px !important;
 }

 /* --- Botones --- */
 /* Hacemos los botones un poco más pequeños en móvil */
 .button, input[type="submit"], input[type="button"], a.butAction, a.butActionDelete {
 padding: 10px 20px !important;
 font-size: 14px !important;
 }

 /* --- Tablas --- */
 /* Reducimos el tamaño del texto y el padding en las celdas para que quepa más información */
 .tagtable tr.oddeven td, .liste tr.oddeven td,
 .tagtable .liste_titre th, .liste .liste_titre th {
 padding: 12px 8px !important;
 font-size: 13px;
 }

 /* --- Menú lateral --- */
 /* En móvil, Dolibarr oculta el menú, pero si apareciera, reducimos el texto */
 .menu_contenu a.vsmenu {
 font-size: 0.85em;
 }
}


@media (max-width: 768px) {

 /* --- Columnas --- */
 div.fichehalfleft,
 div.fichehalfright {
 flex-basis: 100% !important;
 width: 100% !important;
 margin-bottom: 20px !important;
 }

 /* --- Tarjeta Principal --- */
 .fiche {
 padding: 15px !important;
 }

 /* --- Botones --- */
 .button, input[type="submit"], input[type="button"], a.butAction, a.butActionDelete {
 padding: 10px 20px !important;
 font-size: 14px !important;
 }

 /* --- Tablas --- */
 .tagtable tr.oddeven td, .liste tr.oddeven td,
 .tagtable .liste_titre th, .liste .liste_titre th {
 padding: 12px 8px !important;
 font-size: 13px;
 }

 /* --- Menú lateral --- */
 .menu_contenu a.vsmenu {
 font-size: 0.85em;
 }

 /* --- Iconos del Menú Superior (Móvil) --- */
 /* Reducimos el tamaño de los íconos en la barra superior para que no se vean tan grandes */
 #id-top .mainmenu span.fas {
 font-size: 1.1em !important;
 line-height: 1 !important;
 }

 #id-top .tmenucenter {
 padding: 8px 4px !important;
 }
}