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
oderweaponname.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