How to customize the Bootstrap admin panel CSS?
PHP CRUD Tutorial

The Admin Panel is built with Bootstrap 4 and TWIG Templates.
Anything can be customized as desired using Bootstrap CSS.
Depending on what you want to customize, you have several possibilities.


Customizing the Admin CSS with the General Settings form

  1. Open generator/generator.php in your browser
  2. Click the General Settings button

    PHP CRUD General Settings button
  3. Choose your favorite Bootstrap theme from the drop-down list among the 20+ available themes
  4. [optional] Edit the ADMIN SKIN part

The main Bootstrap CSS is built with Color Variants (Codepen).

You can use CSS classes with colors variants from 100 to 900 and custom colors like Teal, Purple, Cyan, ...

For instance: bg-blue-600bg-yellow-200bg-info-800

Here are some examples of what you can do in this way:

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

Bootstrap Themes Preview

  • Bootstrap Admin Panel default Theme
  • Bootstrap Admin Panel cosmo Theme
  • Bootstrap Admin Panel cyborg Theme
  • Bootstrap Admin Panel darkly Theme
  • Bootstrap Admin Panel flatly Theme
  • Bootstrap Admin Panel journal Theme
  • Bootstrap Admin Panel litera Theme
  • Bootstrap Admin Panel lumen Theme
  • Bootstrap Admin Panel lux Theme
  • Bootstrap Admin Panel materia Theme
  • Bootstrap Admin Panel minty Theme
  • Bootstrap Admin Panel pulse Theme
  • Bootstrap Admin Panel sandstone Theme
  • Bootstrap Admin Panel simplex Theme
  • Bootstrap Admin Panel sketchy Theme
  • Bootstrap Admin Panel slate Theme
  • Bootstrap Admin Panel solar Theme
  • Bootstrap Admin Panel spacelab Theme
  • Bootstrap Admin Panel superhero Theme
  • Bootstrap Admin Panel united Theme
  • Bootstrap Admin Panel yeti Theme

Changing the main Header image, the Sidebar user's image
or any other CSS

  1. Create a new CSS file in admin/assets/stylesheets/
  2. Open admin/inc/css-includes.php and add a link to your CSS file:
    <link rel="stylesheet" href="<?php echo ADMIN_URL; ?>assets/stylesheets/custom.css" type="text/css" media="screen">
  3. Add any CSS in your file to overwrite the PHP CRUD CSS:
    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;
    }

Customizing with SASS & Gulp

PHP CRUD Generator is built with SASS & Gulp.

A ready-to-use package to minify and compile SASS and Javascripts is available on Github here: https://github.com/migliori/php-crud-generator-gulp

To compile SASS and/or Javascript:

Download or clone the Github repository at the root of your project and follow the README instructions.

The SASS files

All SASS files including Bootstrap 4 are located in admin/assets/sass/ and compiled in admin/assets/stylesheets/

The CSS files are loaded with admin/inc/css-includes.php.

The Javascript files

All the Javascript files are organized in admin/assets/javascripts/ and minified in the same folder.

The main Javascript is admin/assets/javascripts/project.js.
It loads all the dependencies with the help of LoadJs.

Prerequisites

To customize your Bootstrap admin panel CSS you must beforehand:

Back to the PHP CRUD Tutorials