¿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;
}
}
