Design‐und‐Theming - wahke/etstats GitHub Wiki

🎨 Design & Theming

ETStats Web verwendet das CSS-Framework Bootstrap 5, wodurch sich Layout und Farben sehr leicht anpassen lassen.


📁 Wo befindet sich das Design?

Die relevanten Dateien sind:

/templates/header.php     # HTML-Kopf & Navigation
/templates/footer.php     # HTML-Ende & Scripts
/assets/css/style.css     # Eigene Styles
/assets/img/              # Logos, Waffen, Maps

🎨 Farben anpassen

  1. Öffne /assets/css/style.css
  2. Ändere dort z. B. den Hintergrund oder Schriftfarben:
body {
    background-color: #111;   /* dunkler Hintergrund */
    color: #f0f0f0;           /* helle Schrift */
}

.navbar {
    background-color: #222;
}

Bootstrap nutzt Standardklassen wie bg-dark, text-light, btn-primary, usw.
Du kannst sie überschreiben oder eigene CSS-Klassen verwenden.


🖼️ Logo ändern

  1. Lege dein Logo ab unter /assets/img/logo.png
  2. Füge es in header.php ein:
<img src="/assets/img/logo.png" alt="Logo" height="30">

🗺️ Map- & Waffenbilder

Wenn du pro Map oder Waffe ein Bild anzeigen willst:

  • Speichere Bilder in /assets/img/maps/ oder /assets/img/weapons/
  • Benenne sie passend zu mapname.jpg oder weaponname.png
  • Lade sie im Template dynamisch:
<img src="/assets/img/maps/<?= $map['name'] ?>.jpg" alt="<?= $map['name'] ?>">

🧪 Tipps


📁 Beispielstruktur für Bilder

/assets/img/
├── logo.png
├── maps/
│   ├── goldrush.jpg
│   └── oasis.jpg
├── weapons/
│   ├── mp40.png
│   └── thompson.png

📖 Weiter zu Mehrsprachigkeit