Trick # 87 | Dieser Beitrag beinhaltet 404 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
WordPress bietet mit der Galerie ein nettes Feature, um mehrere Bilder hübsch darzustellen. Wenn aber hoch- und querformatige Fotos gemischt werden, entstehen unschöne Leerräume zwischen den Reihen. Mit ein wenig CSS-Code lässt sich das beheben und die Bilder erscheinen im hübschen Masonry-Stil.
Erstellen Sie zunächst eine Galerie mit den gewünschten Bildern aus Ihrer WordPress-Mediathek.
Um der Galerie den Masonry-Look beizubringen, benötigen Sie folgende CSS-Zeilen. Fügen Sie diese Ihrem CCS-Stylesheet unter Design/Customizer/Zusätzliches CSS hinzu:
.gallery {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
-moz-column-gap: 0px !important;
-webkit-column-gap: 0px !important;
column-gap: 0px !important;
}
.gallery-item, .gallery-icon {
padding: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
}- In den Zeilen 2-4 definieren Sie, wie viele Spalten nebeneinander dargestellt werden sollen. In unserem Beispiel sind es deren 5, Passen Sie ihn nach Wunsch an – verwenden Sie aber in allen Zeilen den selben Wert.
Hier böte es sich an, diesen Wert allenfalls mit einer Media-Query den verschiedenen Bildschirmgrössen anzupassen, auf welchen die Galerie angezeigt wird. - In den Zeilen 5-7 wird dann festgelegt, wie weit auseinander die einzelnen Bild-Spalten angezeigt werden sollen. Diesen Wert haben wir hier überall auf 0px gesetzt. Auch diese Werte können Sie verändern.
- In den Zeilen 11-13 legen Sie weitere Ränder und Abstände fest, welche bei uns auf 0px stehen. Spielen Sie auch mit diesen Werten, bis die Darstellung dem entspricht, was Sie sich wünschen.
Easy. Oder?
Werbung
Links auf der Website einzufügen, ist ja eine einfache Übung. Bloss: Ohne Zutun öffnet der Browser jede verlinkte Seite im Fenster, das gerade offen ist. Bei Links innerhalb des gleichen Webauftritts ist das ja OK. Verlinkt man hingegen auf ...
Manchmal möchte man auf einer Website einen bestimmten Text bei jeder Nennung mit einem Link ergänzen oder ihn einfach korrekt darstellen. Nun könnte man die Textpassage mühselig suchen und überall händisch ersetzen. Besser, schneller und ...
Nun ja: So richtig sicher vor Spambots auf Harvest-Tour sind Ihre Mailadressen nicht, sobald Sie diese auf einer Website anzeigen. Aber immerhin: Es gibt ein paar Tricks, wie Sie wenigstens etwas mehr Sicherheit erreichen können. Und wir räumen ...
Dies ist der 300. Trick aus der Praxis von Dr. Code, den wir Ihnen auf dieser Website vorstellen können. Uns freut dieses Jubiläum. Und darum bauen wir heute eine Timeline - ganz ohne Plugins und Hilfsmittel. Bloss mit ein wenig HTML- und ...
Keine Inhalte gefunden.
Werbung
