kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


Prüfen, ob eine WordPress-Sidebar Widgets enthält

WordPress-Sidebar mit Widget

Wenn ihr ein WordPress-Theme für Kunden erstellt, liegt eine der Herausforderungen darin, eine Lösung für jede Einstellung vorbereitet zu haben, die seitens des Kunden später vorgenommen werden kann. Dazu gehört u.a. auch die Planung der Sidebar. Der Einsatz mit Widgets wird meist getestet, doch ihr solltet auch davon ausgehen, dass die Sidebar keine Widgets enthält. In diesem Fall muss die Sidebar verschwinden. Leere Container-Elemente etc. sind nicht optimal. Mit folgendem Snippet prüft ihr ob einer bestimmten Sidebar Widgets hinzugefügt wurden.

Beitrag zu Ende lesen

Automatisches CSS-Styling von WordPress-Bildergalerien deaktivieren

Wordpress Bildergalerie

Wenn ihr in WordPress eine Bildergalerie einfügt, erzeugt das System automatisch einen <style>-Abschnitt im <head> der Seite und fügt einige CSS-Gestaltungsangaben hinzu. Unter anderem wird die Breite der Bilder berechnet und per CSS angegeben, je nachdem wie viele Spalten ihr beim Anlegen der Bildergalerie für die Bilddarstellung festgelegt habt. Wenn ihr im Backend drei Spalten gewählt habt, berechnet WordPress beispielsweise circa 33% Spaltenbreite. Da dieses automatische Styling häufig nicht gewünscht ist, lässt es sich über die functions.php deaktivieren.

Beitrag zu Ende lesen

Generierter CSS-Content mit den Pseudoelementen ::before und ::after

CSS-Content mit :before und :after

Mit Hilfe der CSS-Selektoren ::before und ::after habt ihr die Möglichkeit vor- bzw. nach einem HTML-Element ein sog. Pseudoelement zu erzeugen. Das Pseudoelement kann wie ein ganz normales HTML-Element mit CSS gestaltet werden, taucht allerdings im HTML-Markup nicht auf. Aus diesem Grund heißt es auch Pseudoelement.
Damit das Pseudoelement entstehen kann, benötigt es zumindest formal einen Inhalt, der über die CSS-Eigenschaft content definiert wird. Die Eigenschaft muss vorhanden sein, sie kann jedoch leer bleiben. Das macht u.a. dann Sinn, wenn das Pseudoelement für Zierelemente eingesetzt wird.

Beitrag zu Ende lesen

Content Choreography für responsive Websites

In der Smartphone-Ansicht einer Website werden die Inhalte i. d. R. »gestapelt«. Alle Elemente werden linear untereinander angeordnet und die Reihenfolge der einzelnen Bereiche (z.B. Header, Hauptnavigation und Inhaltsbereich) entspricht der Reihenfolge der Elemente im HTML-Dokument.
Da dieses Verhalten bei komplexeren Projekten schnell zu Schwierigkeiten führen kann, sucht die Webdesign-Community nach Lösungen um die Reihenfolge bei Bedarf verändern zu können. Das Stichwort lautet »Content Choreography«.

Beitrag zu Ende lesen

CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module

Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit Flexbox perfekt umsetzen. Die Floating-Technik wurde nicht zur Konstruktion komplexer Layouts entwickelt, was wir u.a. daran merken, dass wir Elemente nicht nach oben und unten verschieben können. Flexbox ermöglicht es zwar die Gestaltung vollständig vom HTML-Code zu trennen, bietet sich aber eher für lineare Strukturen an als für verschachtelte. CSS Grid ermöglicht »echte« Gestaltungsraster auf Basis von CSS. In diesem Beitrag beschreiben wir, wie Layouts mit Hilfe von CSS Grids konstruiert werden können.

Beitrag zu Ende lesen