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

Öffne /assets/css/style.css
Ä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

Lege dein Logo ab unter /assets/img/logo.png
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

Verwende Google Fonts oder eigene Schriftarten per CSS
Nutze Bootstrap-Klassen: https://getbootstrap.com/docs/5.3/utilities/colors/
Responsive Design testen auf Handy/Tablet
Optional: Light/Dark Mode umschaltbar machen

📁 Beispielstruktur für Bilder

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

📖 Weiter zu Mehrsprachigkeit