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

css-grids

Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit Flexbox perfekt umsetzen. Die Floating-Technik wurde nicht zur Konstuktion 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 Grids ermöglichen »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

Eigene CSS-Styles bzw. Stylesheets im WordPress-Admin-Bereich verwenden

wordpress-werkzeugleiste-umgefaerbt-mobile

Ab und zu kommt es vor, dass der Admin-Bereich von WordPress individuell gestaltet werden soll. Beispielsweise soll das Farbkonzept für den Kunden angepasst werden. Zu diesem Zweck könnt ihr ein zusätzliches Stylesheet erstellen und mittels Action-Hook im Backend laden. In diesem Beitrag erklären wir, was getan werden muss.

Beitrag zu Ende lesen

WordPress-Theme um Logo-Upload-Funktion (Custom Logo) ergänzen

logo-upload

Seit WordPress 4.5 haben Theme-Entwickler die Möglichkeit im Customizer den Logo-Upload zu erlauben. Wenn die Funktion integriert wurde, sehen Redaktuere im Backend die Option ein Logo hochzuladen, dass dann auf der Website erscheint. In diesem Beitrag beschreiben wir wie die Funktion eingebaut wird, und welche Optionen euch zur Verfügung stehen

Beitrag zu Ende lesen

Transparente Rahmen (border) mit CSS

transparente-borders

Transparente Umrandungen mit Hilfe der border-Eigenschaft scheinen auf den ersten Blick kein Problem zu sein. In der Praxis stellt sich jedoch schnell heraus, dass es nicht so funktioniert, wie in der Theorie gedacht. Und so entstehen oft völlig überflüssige <div>-Verschachtelungen. Um euch vor solch peinlichen Konstruktionen zu bewahren, zeigen wir euch in diesem Beitrag wie es sauberer umgesetzt wird und rufen in diesem Zusammenhang die Eigenschaft background-clip in Erinnerung

Beitrag zu Ende lesen

Bilder mit Texten proportional skalieren

bilder-texte-proportional-skalieren

Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.

Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.

In diesem Beitrag erklären wir, wie Texte, die optisch vor einem Bild platziert wurden, gemeinsam mit dem Bild proportional skaliert werden können.

Beitrag zu Ende lesen

Gewinnspiel zum Video-Training »WordPress-Themes entwickeln und gestalten«

wordpress-themes-erstellen-cover

Seit dem 28.04.2016 ist unser neues Video-Training zum Thema WordPress-Theme-Entwicklung als Download und als DVD im Handel erhältlich. Das Training ist wie unsere bisherigen Trainings auch im Rheinwerk-Verlag erschienen.

Mit diesem Gewinnspiel möchten wir euch die Chance geben ein signiertes DVD-Training zu gewinnen. Wir verlosen insgesamt zwei Exemplare.

Beitrag zu Ende lesen

Bildunterschriften mit CSS immer perfekt ausrichten

bildunterschriften-ausrichten-css

Die Gestaltung von Bildunterschriften kann mitunter lästig werden. Es ist schwierig zu entscheiden ob der Text zentriert oder linksbündig unter dem Bild angezeigt werden soll, da die Textmenge oft stark variiert. Zentrierte Bildunterschriften sehen bei kurzen Texten gut aus. Linksbündig passt besser wenn die Bildunterschrift mehrere Zeilen umfasst. Was also tun?

In diesem Beitrag findet ihr ein CSS-Snippet, dass automatisch dafür sorgt, dass kurze Bildunterschriften zentriert werden, und mehrzeilige Bildunterschriften linksbündig ausgerichtet werden.

Beitrag zu Ende lesen

Kommaseparierte Listen mit CSS

css-komma-list

Eine HTML-Liste wird üblicherweise untereinander und mit Aufzählungszeichen dargestellt. Häufig wünscht man sich jedoch auch eine horizontale Darstellung, bei der die einzelnen Listenelemente nebeneinander stehen und mit Komma von einander getrennt sind. Nur hinter dem letzten Element soll natürlich kein Komma mehr stehen. Mit Hilfe der CSS-Pseudoklasse :not und des -Pseudoelements ::after kann die gewünschte Ansicht elegant hergestellt werden.

Beitrag zu Ende lesen