Skip to main content

🎨 Bootswatch-Themes integrieren

Bootswatch-Themes lokal vorbereiten und für MODX bereinigen

📥 Bootswatch ZIP von GitHub herunterladen

  1. Öffne die Seite:
    👉 https://github.com/thomaspark/bootswatch
  2. Klicke auf Code.
  3. Wähle Download ZIP aus
  4. Speichere die ZIP-Datei lokal auf deinem Linux Desktop.

🗂️ bootswatch-5.zip entpacken

Nach dem Entpacken sieht die Struktur der ZIP so aus:

bootswatch-5
   └── dist
         ├── cerulean
         ├── cosmo
         ├── cyborg
         ├── darkly
         ├── ...

Der Ordner dist enthält alle Bootswatch-Themes.

Nun auf deinem Desktop:

  1. Erstelle einen neuen Ordner, z.B.:
    bootswatch5
  2. Kopiere den kompletten Inhalt von:
    bootswatch-5/dist
    hinein nach:
    bootswatch5

Die Struktur sollte danach so aussehen:

bootswatch5/
  cerulean/
    bootstrap.min.css
    ...
  cosmo/
    bootstrap.min.css
    ...
  cyborg/
    bootstrap.min.css
    ...
  darkly/
    bootstrap.min.css
    ...
  ...

Bootswatch-Themes bereinigen: unnötige Dateien löschen und Google-Fonts entfernen

Nachdem du die Bootswatch-Themes lokal im Ordner bootswatch5 vorbereitet hast, kannst du nun alle überflüssigen Dateien entfernen und sicherstellen, dass keine externen Google-Fonts geladen werden.

🧹 Alles außer bootstrap.min.css in den Theme-Ordnern löschen

Ziel:
Jeder Bootswatch-Theme-Ordner soll später nur noch eine einzige Datei enthalten:
bootstrap.min.css

Alle anderen Dateien werden komplett entfernt, z.B.:

  • bootstrap.css
  • bootstrap.rtl.css / bootstrap.rtl.min.css
  • .map Dateien
  • .scss Dateien
  • weitere Build- oder Debug-Dateien

Wechsle dazu im Terminal nach bootswatch5:

cd /pfad/zu/bootswatch5

🔍 Optional: erst anzeigen, was gelöscht würde

find . -type f ! -name 'bootstrap.min.css'

🗑️ Dann löschen

find . -type f ! -name 'bootstrap.min.css' -delete

Danach enthält jeder Theme-Ordner nur noch:

THEME_NAME/bootstrap.min.css

🔒 Externe Google-Fonts aus bootstrap.min.css entfernen

Einige Bootswatch-Themes laden externe Fonts, z.B. so:

@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);

Das soll entfernt werden, damit keine Fonts von Google geladen werden.

🧩 Entfernen des @import-Befehls in allen Themes

find . -type f -name 'bootstrap.min.css' -exec \
  perl -pi -e 's/@import url\([^)]*fonts\.googleapis\.com[^)]*\);//g' {} +

Dieser Befehl:

  • findet alle bootstrap.min.css
  • entfernt nur den @import-Teil, nicht den Rest der Zeile
  • zerstört keinerlei Styles
  • lässt die Themes vollständig funktionsfähig

Nach dem Lauf prüfen, ob noch irgendwo Google-Fonts importiert werden:

grep -R "fonts.googleapis.com" -n .

✅ Ergebnis

Nach diesem Schritt ist dein Ordner perfekt vorbereitet:

  • Jeder Theme-Ordner enthält nur noch die bereinigte bootstrap.min.css.
  • Alle externen Google-Fonts wurden entfernt.
  • Du kannst die Themes später bequem nach MODX kopieren, z.B. nach:
/modx/assets/bs5/

Danach bindest du im MODX-Template das gewünschte Theme ein, indem du nur den Theme-Namen anpasst, z.B:

    <!-- Bootswatch-Theme (lokal, z.B. minty) -->
    <link rel="stylesheet" href="[[++assets_url]]bs5/cerulean/bootstrap.min.css">

In einem zweiten Browserfenster die Frontpage prüfen. Eventuell ist ein Refresh (F5) notwendig.

27 Bootswatch-Themes:
brite, cerulean, cosmo, cyborg, darkly, flatly, journal, litera, lumen, lux, materia, minty, morph, pulse, quartz, sandstone, simplex, sketchy, slate, solar, spacelab, superhero, united, vapor, versa, yeti, zephyr

Back to top