Como personalizar o CSS do painel de administração do Bootstrap?

O painel de administração foi criado com Bootstrap e TWIG Templates.
O design pode ser personalizado conforme desejado usando o CSS do Bootstrap.
Dependendo do que o senhor deseja personalizar, há várias possibilidades.

Personalização do tema CSS do Bootstrap Admin com o formulário General Settings

São fornecidos mais de 20 modelos de painel.
Cada tema é de qualidade superior e apresenta um design moderno e responsivo.
Todos os temas são fornecidos gratuitamente pela Bootswatch

  1. Abra o arquivo generator/generator.php em seu navegador
  2. Clique no botão General Settings (Configurações gerais )

    PHP CRUD General Settings button
  3. Escolha seu tema favorito do Bootstrap na lista suspensa entre os mais de 20 temas disponíveis.
    O modelo é aplicado ao painel de administração do Bootstrap em tempo real assim que o senhor valida o formulário. Fique à vontade para testar diferentes modelos em seu projeto.
  4. [ Opcional] Editar a parte ADMIN SKIN

    Os temas incluídos no pacote são todos concebidos com design responsivo e qualidade premium, mas o senhor tem liberdade para fazer suas próprias modificações. Os principais elementos do painel podem ser facilmente personalizados para corresponder ao design do seu projeto (veja a ilustração abaixo).

    Bootstrap template design customization with CSS
    Personalização do design do modelo Bootstrap com CSS

O CSS principal do Bootstrap é criado com Color Variants (Codepen).

O senhor pode usar classes CSS com variações de cores de 100 a 900 e cores personalizadas como azul-petróleo, roxo, ciano, ...

Por exemplo: bg-blue-600bg-yellow-200bg-info-800

Veja a seguir alguns exemplos de temas com elementos CSS personalizados

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

Visualização de temas do 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

Alterar a imagem do cabeçalho principal, a imagem do usuário da barra lateral
ou qualquer outro CSS

  1. Crie um novo arquivo CSS em admin/assets/stylesheets/
  2. Abra admin/inc/css-includes.php e adicione um link para seu arquivo CSS:
    <link rel="stylesheet" href="<?php echo ADMIN_URL; ?>assets/stylesheets/custom.css" type="text/css" media="screen">
  3. Adicione qualquer CSS em seu arquivo para substituir o CSS do modelo 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;
}

Personalização do tema do painel de administração do Bootstrap com SASS e Gulp

O PHP CRUD Generator foi desenvolvido com SASS e Gulp.

Um pacote pronto para uso para minificar e compilar SASS e Javascripts está disponível para download no Github aqui: https://github.com/migliori/php-crud-generator-gulp
Esses arquivos de origem permitem editar o CSS e/ou o Javascript do tema Bootstrap Admin.

Para compilar SASS e/ou Javascript:

Faça o download ou clone o repositório do Github na raiz do seu projeto e siga as instruções do README.

Os arquivos SASS

Todos os arquivos SASS, inclusive o Bootstrap, estão localizados em admin/assets/sass/ e compilados em admin/assets/stylesheets/

Os arquivos CSS são carregados com admin/inc/css-includes.php.

Os arquivos Javascript

Todos os arquivos Javascript são organizados em admin/assets/javascripts/ e minificados na mesma pasta.

O Javascript principal é admin/assets/javascripts/project.js.
Ele carrega todas as dependências do projeto com a ajuda do LoadJs.

Pré-requisitos

Para personalizar o CSS do painel de administração do Bootstrap, o senhor deve ter um conhecimento prévio:

O painel de administração do Bootstrap

Página principal do tutorial PHP CRUD