¿Cómo personalizar el CSS del panel de administración de Bootstrap?

El panel de administración está construido con plantillas Bootstrap y TWIG.
El diseño puede personalizarse como se desee utilizando Bootstrap CSS.
Dependiendo de lo que desee personalizar, tiene varias posibilidades.

Personalización del tema CSS de administración de Bootstrap con el formulario de configuración general

Se proporcionan más de 20 tempates de salpicadero.
Cada tempate es de primera calidad y cuenta con un moderno diseño responsivo.
Todos los temas son proporcionados gratuitamente por Bootswatch

  1. Abra generator/generator. php en su navegador
  2. Pulse el botón Configuración general

    PHP CRUD General Settings button
  3. Elija su tema Bootstrap favorito de la lista desplegable entre los más de 20 temas disponibles.
    La plantilla se aplica al panel de administración de Bootstrap en tiempo real en cuanto usted valida el formulario. No dude en probar diferentes plantillas para su proyecto.
  4. [opcional] Editar la parte ADMIN SKIN

    Los temas incluidos en el paquete están todos concebidos en diseño responsive y calidad premium, pero usted es libre de hacer sus propias modificaciones. Los elementos principales del panel de control pueden personalizarse fácilmente para adaptarlos al diseño de su proyecto (véase la ilustración siguiente).

    Bootstrap template design customization with CSS
    Personalización del diseño de la plantilla Bootstrap con CSS

El CSS principal de Bootstrap está construido con Variantes de Color (Codepen).

Puede utilizar clases CSS con variantes de colores de 100 a 900 y colores personalizados como Teal, Purple, Cyan, ...

Por ejemplo: bg-azul-600bg-amarillo-200bg-info-800

A continuación encontrará algunos ejemplos de temas con elementos CSS personalizados

  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin

Vista previa de los temas Bootstrap

  • PHP CRUD Bootstrap Dashboard default
  • PHP CRUD Bootstrap Dashboard cerulean
  • PHP CRUD Bootstrap Dashboard cosmo
  • PHP CRUD Bootstrap Dashboard cyborg
  • PHP CRUD Bootstrap Dashboard darkly
  • PHP CRUD Bootstrap Dashboard flatly
  • PHP CRUD Bootstrap Dashboard journal
  • PHP CRUD Bootstrap Dashboard litera
  • PHP CRUD Bootstrap Dashboard lumen
  • PHP CRUD Bootstrap Dashboard lux
  • PHP CRUD Bootstrap Dashboard minty
  • PHP CRUD Bootstrap Dashboard morph
  • PHP CRUD Bootstrap Dashboard pulse
  • PHP CRUD Bootstrap Dashboard quartz
  • PHP CRUD Bootstrap Dashboard sandstone
  • PHP CRUD Bootstrap Dashboard simplex
  • PHP CRUD Bootstrap Dashboard slate
  • PHP CRUD Bootstrap Dashboard solar
  • PHP CRUD Bootstrap Dashboard spacelab
  • PHP CRUD Bootstrap Dashboard superhero
  • PHP CRUD Bootstrap Dashboard united
  • PHP CRUD Bootstrap Dashboard yeti
  • PHP CRUD Bootstrap Dashboard zephyr

Cambiar la imagen del encabezado principal, la imagen del usuario de la barra lateral
o cualquier otro CSS

  1. Cree un nuevo archivo CSS en admin/assets/stylesheets/
  2. Abra admin/inc/css-includes.php y añada un enlace a su archivo CSS:
    <link rel="stylesheet" href="<?php echo ADMIN_URL; ?>assets/stylesheets/custom.css" type="text/css" media="screen">
  3. Añada cualquier CSS en su archivo para sobrescribir el CSS de la plantilla inicial:
    body {
    font-family: Arial, Helvetica, sans-serif;
}

.page-header.has-cover {
    background: url(../images/backgrounds/custom-header-bg.jpg);
}

.sidebar .sidebar-user .category-content {
    background: url(../images/backgrounds/custom-user-bg.jpg) 50% no-repeat;
}

Personalización del tema del panel de control de Bootstrap Admin con SASS & Gulp

PHP CRUD Generator está construido con SASS & Gulp.

Un paquete listo para usar para minificar y compilar SASS y Javascripts está disponible para su descarga en Github aquí: https://github.com/migliori/php-crud-generator-gulp
Estos archivos fuente permiten editar el CSS y/o Javascript del tema Bootstrap Admin.

Para compilar SASS y/o Javascript:

Descargue o clone el repositorio de Github en la raíz de su proyecto y siga las instrucciones del README.

Los archivos SASS

Todos los archivos SASS, incluido Bootstrap, se encuentran en admin/assets/sass/ y se compilan en admin/assets/stylesheets/

Los archivos CSS se cargan con admin/inc/css-includes.php.

Los archivos Javascript

Todos los archivos Javascript están organizados en admin/assets/javascripts/ y minificados en la misma carpeta.

El Javascript principal es admin/assets/javascripts/project.js.
Carga todas las dependencias del proyecto con la ayuda de LoadJs.

Requisitos previos

Para personalizar el CSS del panel de control de administración de Bootstrap debe hacerlo previamente:

El panel de administración de Bootstrap

Página principal del tutorial PHP CRUD