Jak upravit CSS panelu správce Bootstrap?

Panel správce je vytvořen pomocí šablon Bootstrap a TWIG.
Design lze upravit podle potřeby pomocí Bootstrap CSS.
V závislosti na tom, co chcete přizpůsobit, máte několik možností.

Přizpůsobení motivu CSS správce Bootstrap pomocí formuláře Obecná nastavení

K dispozici je více než 20 templátů přístrojových desek.
Každý tempate je prvotřídní kvality a má moderní responzivní design.
Všechna témata jsou poskytována zdarma společností Bootswatch

  1. Otevřete v prohlížeči soubor generator/generator.php
  2. Klikněte na tlačítko Obecná nastavení

    PHP CRUD General Settings button
  3. Vyberte si svůj oblíbený motiv Bootstrap z rozevíracího seznamu z více než 20 dostupných motivů.
    Šablona se aplikuje na panel správce Bootstrap v reálném čase, jakmile potvrdíte formulář. Neváhejte vyzkoušet různé šablony pro svůj projekt.
  4. [nepovinné] Upravte část ADMIN SKIN

    Všechna témata obsažená v balíčku jsou koncipována v responzivním designu a prémiové kvalitě, ale můžete si je libovolně upravit. Hlavní prvky ovládacího panelu lze snadno upravit tak, aby odpovídaly designu vašeho projektu (viz obrázek níže).

    Bootstrap template design customization with CSS
    Přizpůsobení designu šablony Bootstrap pomocí CSS

Hlavní CSS Bootstrapu je vytvořeno pomocí nástroje Color Variants (Codepen).

Můžete použít třídy CSS s variantami barev od 100 do 900 a vlastní barvy, jako je Teal, Purple, Cyan, ...

Například: bg-blue-600bg-yellow-200bg-info-800

Níže uvádíme několik příkladů témat s vlastními prvky CSS.

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

Náhled motivů 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

Změna hlavního obrázku záhlaví, obrázku uživatele postranního panelu
nebo jakéhokoli jiného CSS

  1. Vytvoření nového souboru CSS v admin/assets/stylesheets/
  2. Otevřete soubor admin/inc/css-includes.php a přidejte odkaz na soubor CSS:
    <link rel="stylesheet" href="<?php echo ADMIN_URL; ?>assets/stylesheets/custom.css" type="text/css" media="screen">
  3. Přidejte do souboru libovolné CSS, abyste přepsali původní CSS šablony:
    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;
}

Přizpůsobení tématu panelu správce Bootstrap pomocí SASS a Gulp

Generátor PHP CRUD je vytvořen pomocí SASS a Gulp.

Balíček připravený k použití pro minifikaci a kompilaci SASS a Javascripts je k dispozici ke stažení na Githubu zde: https://github.com/migliori/php-crud-generator-gulp.
Tyto zdrojové soubory umožňují upravovat CSS a/nebo Javascript tématu Bootstrap Admin.

Kompilovat SASS a/nebo Javascript:

Stáhněte si nebo naklonujte repozitář Github do kořenového adresáře projektu a postupujte podle pokynů v README.

Soubory SASS

Všechny soubory SASS včetně Bootstrapu jsou umístěny v admin/assets/sass/ a zkompilovány v admin/assets/stylesheets/.

Soubory CSS se načítají pomocí admin/inc/css-includes.php.

Soubory Javascript

Všechny soubory Javascript jsou uspořádány v adresáři admin/assets/javascripts/ a jsou minifikovány ve stejné složce.

Hlavní Javascript je admin/assets/javascripts/project.js.
Ten načítá všechny závislosti projektu pomocí LoadJs.

Předpoklady

Chcete-li si přizpůsobit ovládací panel Bootstrap CSS, musíte předem:

Panel správce Bootstrap

Hlavní stránka výukového programu PHP CRUD