2

Quisiera cambiar el color de la plantilla admin.lte 3.0.5. Especificamente el menu izquierdo. Pero no se como. He estado viendo el html y haciendo puebas pero no estoy seguro de que sea aqui:

<aside class="main-sidebar sidebar-dark-blue elevation-4 ">
            <!-- Brand Logo -->
            <a href="/" class="brand-link">

Cualquier sugerencia por favor, es bienvenida. Fijaos en la foto.

El fondo del menu izquierdo


Curiosamente ese fichero del que me hablas (_all-skins.min.css) no aparece :(

El archivo no aparece

3
  • Si deseas ponerle un color a tu gusto, diferente a los skin que vienen pues podrías customizar el archivo _all-skins.min.css que es el que trae los skins y ponerle el que desees. Commented el 3 sept. 2020 a las 15:47
  • Disculpa, que versión de AdminLTE estas usando?, porque la versión 2.4 por la foto que veo parece que esa tienes si traía consigo ese archivo. Si es la version 3 esta dentro de /dist/css/adminlte.min.css Commented el 3 sept. 2020 a las 16:09
  • Hola. Gracias por responder. Pero en ese directorio, aparece un fichero llamado: "adminlte.css" Sera este del que hablamos?
    – Eriel
    Commented el 4 sept. 2020 a las 17:40

5 respuestas 5

2

Si quieres cambiar el color te recomiendo que crees tus propias clases de estilo en un archivo aparte, ya que recuerda que estas usando los archivos minificados del css del AdminLTE y asi solo intercambias la clase sidebar-dark-blue por tu clase css.

introducir la descripción de la imagen aquí

Otra manera simple de hacerlo es usar la etiqueta style y sobrescribir la clase css usando !important, te quedaría algo así.

 <style>
      .sidebar-dark-blue{
        background: #455279 !important;
      }
 </style>
2
  • Lo que tomaría tiempo sería el inspeccionar los elementos para encontrar la clase adecuada a sobreescribir. +1 Commented el 17 feb. 2022 a las 22:11
  • Puedes hacer una copia de uno de los temas que ya trae la platilla y y solo cambias los colores, es mucho mas sencillo. Commented el 17 feb. 2022 a las 22:13
1

Cómo están? Creo que hay una manera que no se dijo y es la más rápida. Van al documento "adminlte.php" que se encuentra en "config", y van hasta la opción: 'classes_sidebar' => 'sidebar-dark-primary elevation-4'. Ahí podes cambiar a "light" el dark y luego las opciones de selección cambian si modificamos "primary" por: danger, secondary, etc. Espero les sirva

1

El color del sidebar de cambia en config/adminlte.php:

'classes_sidebar' => 'sidebar-dark-info elevation-4'

Pero creo que aqui solo te deja cambiar version dark y light.

0

Esto lo encuentras en la configuracion del archivo config de AdminLTE en la carpeta config

/*
|--------------------------------------------------------------------------
| Admin Panel Classes
|--------------------------------------------------------------------------
|
| Here you can change the look and behavior of the admin panel.
|
| For detailed instructions you can look the admin panel classes here:
| https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Layout-and-Styling-Configuration
|
*/

'classes_body' => '',
'classes_brand' => '',
'classes_brand_text' => '',
'classes_content_wrapper' => '',
'classes_content_header' => '',
'classes_content' => '',
'classes_sidebar' => 'sidebar-dark-info elevation-4',
'classes_sidebar_nav' => '',
'classes_topnav' => 'navbar-dark navbar-light',
'classes_topnav_nav' => 'navbar-expand',
'classes_topnav_container' => 'container',

En 'clases_sidebar defines la alguna clase de las que ya trae AdminLTE.

0

Yo encontré una solución definitiva para cambiar los colores espero que me apoyen: 1.-Debes agregar un archivo css en la carpeta public,dist,css ahi le agregas cualquier nombre seguido de css en mi caso yo lo puse custom.css y adentro colocan este código tal cual lo copian y lo pegan:

introducir la descripción de la imagen aquí

2.-Despues lo guardan y en su plantilla principal de AdminLTE debajo de titulo de la pagina solo le agregan este código y verán la magia:

introducir la descripción de la imagen aquí

1
  • 1
    No podemos copypastear una imagen :) El código y los mensajes de error siempre como texto, con formato ya que no todos pueden ver las imágenes. Además, pulsa en editar y describe cómo este código responde a la pregunta. Puede que entiendas lo que hace el código, pero otros quienes lleguen a tener un problema similar, no. Lee Cómo responder y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 1 ago. a las 11:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.