Galerie Design anpassen: erste Schritte für Anfänger

Die Vereinsseite ist in Dunkelgrün und Weiß gehalten, der Kopf zeigt das Wappen, und dann klickt jemand auf „Fotos“ und landet in einer hellgrauen Galerie mit blauen Links. Technisch ist alles in Ordnung, aber es wirkt wie eine fremde Website. An dieser Stelle wollen die meisten Betreiber ihr Galerie-Design anpassen: nicht neu erfinden, sondern an die vorhandene Seite angleichen. Programmierkenntnisse brauchen Sie dafür nicht, wohl aber einen Plan, welche Änderung in welche Datei gehört.

Galerie-Design anpassen: welche Änderung wohin gehört

Die meiste Zeit geht beim Umgestalten mit Suchen an der falschen Stelle verloren. Wer etwa die Zahl der Bilder pro Reihe im CSS erzwingen will, obwohl es dafür eine Einstellung gibt, arbeitet gegen die Galerie. Ordnen Sie deshalb jeden Wunsch zuerst einer von drei Stellen zu: Stylesheet, Vorlage oder Einstellungen. Die Tabelle nennt sie so, wie sie im Bildergalerie-Script heißen.

Die beiden unteren Zeilen erledigen Sie in der Verwaltung, ohne eine Datei zu öffnen. Eine Design-Einstellung oder eine Auswahl fertiger Themes gibt es dort dagegen nicht. Farben und Aufbau stecken in drei Dateien im Galerie-Ordner:

Eine häufige Verwechslung: Die Datei css/style.css gestaltet nur die Verwaltung unter admin/. Wer dort Farben ändert, sieht in der Galerie keinen Unterschied.

Ab Werk setzt css/layout.css eine Systemschrift in 16 Pixel, einen hellgrauen Seitenhintergrund (#eef1f4) und Links in Blau (#1d4ed8). Die Galerie selbst steht in einer weißen Karte (.div_center) von höchstens 980 Pixel Breite mit abgerundeten Ecken. Die Kategorienamen auf der Startseite tragen die Klasse p.ueberschrift_startseite_text, die Vorschaubilder img.vorschau_bild mit 8 Pixel runden Ecken. Diese Namen brauchen Sie, sobald Sie eigene Regeln schreiben.

Eine eigene CSS-Datei übersteht jedes Update

Ein Update lädt alle Dateien des Pakets neu hoch und überschreibt dabei tpl/bildergalerie.html, css/layout.css und css/lightbox.css. Änderungen direkt in diesen Dateien sind danach weg. Legen Sie Ihre Regeln deshalb von Anfang an in eine eigene Datei, die als letzte geladen wird. Dann können Sie das Galerie-Design anpassen, sooft Sie wollen, und sichern vor einem Update nur zwei Dateien: die Vorlage und Ihre CSS-Datei.

1. Legen Sie im Galerie-Ordner die Datei css/mein-design.css an und speichern Sie sie als UTF-8.
2. Fügen Sie in tpl/bildergalerie.html direkt unter der Zeile mit ./css/lightbox.css diese Zeile ein: <link href="./css/mein-design.css" rel="stylesheet" type="text/css">
3. Tragen Sie Ihre Regeln ein, zum Beispiel body { background-color: #f4efe6; } für einen warmen Hintergrund, p.ueberschrift_startseite_text { color: #7a2e0e; } für rotbraune Kategorienamen und .vorschau_bild { border-radius: 0; } für eckige Vorschaubilder.
4. Laden Sie beide Dateien hoch und rufen Sie die Galerie mit Strg+F5 auf (warum, steht bei den typischen Fehlern).

Die neue Zeile gehört unter beide vorhandenen Stylesheets, denn bei zwei gleich gewichteten Regeln gewinnt die zuletzt geladene. Stünde sie zwischen layout.css und lightbox.css, würden Ihre Farben für die große Ansicht wieder überschrieben. Das Diagramm zeigt, was ein Update mit dieser Zeile macht.

Zwei Regeln für die Vorlage selbst: Setzen Sie {AUSGABE_BILDERGALERIE} genau einmal ein und lassen Sie </body> stehen, weil die Galerie davor die Zeile „Copyright by Bildergalerie-Script.de“ einfügt. Außerdem entfernt der Platzhalter-Parser leere geschweifte Klammern {} aus einem <style>-Block der Vorlage. Auch deshalb sind CSS-Regeln in der eigenen Datei besser aufgehoben.

Farben der eigenen Website übernehmen

Für die meisten Betreiber heißt Galerie-Design anpassen vor allem: die Farben der Hauptseite übernehmen. Raten müssen Sie die Werte nicht. Öffnen Sie Ihre Website im Browser, klicken Sie mit der rechten Maustaste auf den farbigen Kopfbereich und wählen Sie „Untersuchen“. Im unteren Teil des Fensters steht die Farbe als Hexwert, etwa #2e7d32 für ein kräftiges Grün. Notieren Sie so drei Werte: den Hintergrund der Seite, die Textfarbe und eine Akzentfarbe für Links und Überschriften. Mit drei Farben bleibt das Ergebnis ruhig.

1. Tragen Sie in mein-design.css zuerst nur die Hintergrundfarbe ein und prüfen Sie das Ergebnis. Wer einen Wert pro Durchgang ändert, weiß bei einer Panne sofort, woran es lag.
2. Passt der Hintergrund, folgt die Linkfarbe mit a { color: … }, danach die Farbe der Kategorienamen.
3. Öffnen Sie die Galerie zum Schluss auf dem Handy und in einem zweiten Browser.

Kontrast mit Zahlen prüfen

Ob eine Schrift lesbar ist, lässt sich messen: Der Kontrastwert vergleicht die Helligkeit von Schrift und Hintergrund, für Fließtext gilt 4,5 zu 1 als untere Grenze. Das Vereinsgrün #2e7d32 erreicht auf Weiß 5,1 zu 1 und taugt damit als Linkfarbe. Ein modisches Hellgrau wie #9ca3af kommt auf Weiß nur auf 2,5 zu 1 und ist für Bildbeschreibungen zu blass. Das Blau, das die Galerie ab Werk für Links nutzt, liegt bei 6,7 zu 1.

Chrome zeigt den Wert an, wenn Sie unter „Untersuchen“ bei einer Textfarbe auf das kleine Farbfeld klicken. Liegt er unter 4,5, machen Sie die Schrift dunkler, statt den Hintergrund aufzuhellen. So bleiben Ihre Fotos die hellsten Flächen der Seite.

Schrift und Abstände

Ab Werk nutzt die Galerie die Systemschrift, die Windows, macOS oder Android ohnehin mitbringen. Sie lädt ohne Wartezeit und sieht überall vertraut aus. Wie Sie die Schrift Ihrer Website übernehmen, steht bei den häufigen Fragen.

Bei den Abständen ist Zurückhaltung meist besser. Jede Zelle der Vorschaubilder hat ab Werk 10 Pixel Innenabstand, zwischen zwei Fotos liegen also 20 Pixel. Verkleinern Sie den Wert stark, kleben die Fotos aneinander. Vergrößern Sie ihn deutlich, werden die Vorschaubilder kleiner, denn die Spalte selbst wird dadurch nicht breiter: Jedes Pixel mehr Abstand geht vom Bild ab.

Größe und Anzahl der Vorschaubilder

Größere Vorschaubilder stehen auf vielen Wunschlisten ganz oben, und gerade sie gehören nicht ins CSS. Breite und Anzahl pro Reihe stellen Sie unter „Einstellungen“ im Abschnitt „Vorschaubilder“ ein: „Breite der Vorschaubilder“ (Standard 200, erlaubt 20 bis 1000 Pixel) und „Vorschaubilder pro Zeile“ (Standard 2, erlaubt 1 bis 20). Die Galerie plant für jede Spalte die Bildbreite plus 36 Pixel Spielraum für Abstand und Rahmen ein. In der Karte stehen dafür 916 Pixel zur Verfügung: 980 Pixel abzüglich je 32 Pixel Innenabstand links und rechts.

• 3 Spalten zu 200 Pixel: Die Bildtabelle braucht 3 × 236 = 708 Pixel. Sie passt in die Karte, und die Vorschaubilder erscheinen in voller Größe.
• 5 Spalten zu 200 Pixel: Gebraucht würden 1180 Pixel, mehr als die 916 vorhandenen. Die Tabelle verteilt den Platz dann gleichmäßig, und die Vorschaubilder schrumpfen auf etwa 160 Pixel. Wer fünf Spalten möchte, stellt die Breite besser gleich auf 150 Pixel, dann erscheinen die Vorschaubilder wieder in voller Größe.
• Handy bis 600 Pixel Breite: Hier stehen die Vorschaubilder immer in zwei Spalten, egal was eingestellt ist.

Die Kacheln der Startseite umgestalten

Die Startseite mit den Kategorien als Kacheln sehen Besucher zuerst, hier wirkt eine kleine Änderung am stärksten. Jede Kachel (.kategorie_kachel) ist ab Werk fast weiß (#f8fafc), hat einen dünnen grauen Rand (#e3e7ec) und 10 Pixel runde Ecken. Links steht das Titelbild (.kategorie_titelbild, 140 mal 105 Pixel, auf dem Handy 96 mal 72), rechts folgen Name, Beschreibung, der Link „Bilder anzeigen...“ und die Bilderzahl. Jede Kachel ist mindestens 340 Pixel breit, auf dem Computer stehen deshalb zwei nebeneinander.

Für Hintergrund und Rand der Kacheln reichen zwei Regeln in mein-design.css:

.kategorie_kachel { background: #fbf7f0; border-color: #d9c7a8;
}
.kategorie_kachel:hover,
.kategorie_kachel:focus-within { background: #fffaf3; border-color: #7a2e0e;
}

Die zweite Regel ist nötig, weil layout.css beim Überfahren mit der Maus und beim Ansteuern mit der Tastatur eigene Werte setzt: einen weißen Hintergrund und den grauen Rand #b9c3cf. Eine Regel mit :hover wiegt schwerer als eine ohne, auch wenn diese später geladen wird. Fehlt die zweite Zeile, springt die warme Kachel beim Überfahren auf Weiß mit grauem Rand zurück. Mit ihr hellt sie sich nur leicht auf und bekommt einen rotbraunen Rand. Mit Seitenhintergrund, Kategorienamen und Linkfarbe aus den Abschnitten oben sieht eine Kachel danach so aus:

Beim Titelbild ist Vorsicht angebracht. Eine Regel wie .kategorie_titelbild { width: 160px; height: 120px; } verdrängt auch auf dem Handy die dort vorgesehenen 96 mal 72 Pixel. Schreiben Sie sie deshalb in einen Block @media (min-width: 601px) { … }. Außerdem ist das Titelbild das Vorschaubild des ersten Bilds der Kategorie: Steht die „Breite der Vorschaubilder“ unter 160, wird es hochgerechnet und wirkt unscharf. Drei Kacheln pro Reihe zu erzwingen lohnt sich nicht, denn neben dem Titelbild bliebe dann kaum Platz für Name und Link.

Typische Fehler beim Umgestalten

Die meisten Pannen haben eine harmlose Ursache und ein eindeutiges Erkennungszeichen:

• Nichts ändert sich, obwohl gespeichert: Der Browser zeigt meist noch die zwischengespeicherte alte Datei. Strg+F5, am Mac Cmd+Umschalt+R, lädt alles frisch vom Server. Ändert sich weiter nichts, haben Sie die falsche Datei bearbeitet, etwa css/style.css der Verwaltung, oder die Kopie auf Ihrem Rechner nicht hochgeladen.
• Ab einer Stelle wirkt keine Regel mehr: Irgendwo fehlt eine schließende geschweifte Klammer. Der Browser liest alles danach als Teil der kaputten Regel. Suchen Sie direkt über der ersten Regel, die nicht mehr greift.
• Die Seite sieht plötzlich völlig falsch aus: Spielen Sie die letzte funktionierende Fassung von mein-design.css zurück, statt lange zu suchen. Legen Sie dafür vor jeder größeren Änderung eine Kopie der Datei an.
• Nach einem Update ist alles wieder wie neu: Die link-Zeile für mein-design.css fehlt in der neuen Vorlage. Fügen Sie sie wieder unter ./css/lightbox.css ein.

Zum Üben können Sie das Bildergalerie-Script kostenlos herunterladen, in einem Testordner auf Ihrem Webspace installieren und dort das Galerie-Design anpassen, bevor Sie die fertige CSS-Datei in die echte Galerie übernehmen.

Häufige Fragen

Vier Fragen, die in der Anleitung oben offen bleiben.

Verwandte Themen

Wer am Design schraubt, kommt schnell mit Template, CSS und dem passenden Editor in Berührung.

• Was ist ein Template einfach erklärt
• Was ist CSS einfach erklärt
• Logo in die Webseite einbinden
• Was ist ein Editor für Webdateien
• Was ist ein Quelltext einfach erklärt
• Bildergalerie Ratgeber: Eine Bildergalerie planen und erstellen