Alle Artikel in der Kategorie “Coding

WordPress Custom CSS
Kommentare 15

Eigenes CSS in ein WordPress-Theme integrieren – so funktioniert’s

Manchmal möchte man nur eine Kleinigkeit an einem WordPress-Theme ändern, zum Beispiel eine Schriftfarbe oder einen Schriftstil anpassen. Wenn diese Änderungen im Theme standardmäßig nicht möglich sind, gibt es alternativ die Option eigenes CSS zu integrieren und so CSS-Eigenschaften des Themes zu ersetzen oder sogar ganz neue CSS-Eigenschaften zu ergänzen. Und wie funktioniert das?

Die Voraussetzung ist, dass man bereits ein wenig mit CSS vertraut ist. Dann ist die Anpassung eines Themes mit eigenem CSS eigentlich gar nicht so schwierig und es gibt drei verschiedene Möglichkeiten das eigene CSS einzubinden. Wenn man wirklich nur ein paar CSS-Eigenschaften ändern oder hinzufügen möchte und sonst das Theme im Standard-Zustand bleiben soll, kann man ein WordPress-Plugin nutzen, wie z.B. Simple Custom CSS oder My Custom CSS. Wer bereits das Jetpack-Plugin nutzt, benötigt überhaupt kein weiteres Plugin, sondern kann einfach die bereits im Jetpack-Plugin integrierte Funktion „Eigenes CSS“ aktivieren und unter Design → CSS bearbeiten mit dem eigenen CSS loslegen. In vielen WordPress Premium-Themes ist außerdem bereits eine Option für das Schreiben von eigenem CSS vorhanden. So spart man sich ebenfalls die Installation einen extra Plugins, der Nachteil ist allerdings, dass so das CSS nicht Theme-unabhängig ist und bei einem Theme-Wechsel verloren geht. Diese Option sollte also nur genutzt werden, wenn speziell CSS des Themes angepasst werden soll. Weiterlesen

Kommentare 4

Buch-Tipp: Sass for Web Designers von Dan Cederholm bei A Book Apart

Auch CSS kann recht kompliziert werden und mit immer anspruchsvolleren Webdesigns werden auch die Stylesheets immer länger und aufwendiger. Sass (kurz für: Syntactically Awesome Stylesheets) bietet dafür eine Lösung, denn z.B. mit Hilfe von Variablen und verschachtelten Regeln (Nested Rules) in Sass kann das Schreiben von CSS sehr viel einfacher werden.

Damit einem der Einstieg und die Arbeit mit Sass leichter gemacht wird, schreibt Dan Cederholm (Gründer von Dribbble, bloggt auf SimpleBits) in seinem neuen A Book Apart-Buch “Sass for Web Designers” eine leicht zu verstehende Anleitung mit Tipps und Tricks zur Arbeit mit Sass.

"Sass for Web Designers" von Dan Cederholm.

“Sass for Web Designers” von Dan Cederholm.

Für alle, die sich bisher noch nicht an Sass herangetraut haben oder noch nicht viel mit Sass gearbeitet haben, bietet das Buch mit seinem ansprechenden Layout und der leicht verständlichen, lockeren Sprache (nur auf Englisch) einen prima Einstieg in die Materie. Wer gleich loslegen möchte kann sich für 9 US Dollar (ca. 6,70€) das eBook downloaden, es gibt aber auch eine sehr schöne gebundene Ausgabe (für 18 US Dollar + Versand) des Buches.

Kommentare 18

WordPress How-To: Eigene Widgetbereiche im Theme anlegen

Das tolle an WordPress ist, dass es so flexibel ist und man die eigene WordPress-Seite auch relativ leicht (z.B. über ein Child-Theme) erweitern und so individuell anpassen kann. In heutigen kleinen Tutorial möchte ich dir zeigen, wie man in einem WordPress-Theme eigene Widget-Bereiche hinzufügen kann. Denn Widgets können natürlich nicht nur in der Sidebar integriert werden. Oft ist es auch hilfreich Widget-Bereiche für den Header, Footer oder sogar auf Seiten anzulegen.

Eigene Widget-Bereiche können auch sehr praktisch sein, wenn du eine WordPress-Seite für einen Kunden erstellst. So kann dein Kunde später leicht Webseiten-Inhalte über Widgets erweitern und anpassen, ohne selbst in den Theme-Code einsteigen zu müssen. Und so funktioniert’s:

Weiterlesen

Kommentare 14

Genericons: Eine kostenlose Icon Font für WordPress-Projekte

Es gibt inzwischen jede Menge Icon Fonts und in einem früheren Artikel habe ich bereits über die sehr beliebte Font Awesome Icon Font (eine Icon Font, die sich vor allem für Bootstrap-Projekte geeignet) berichtet.
genericons-icon-font-for-wordpress
Für unser nächstes WordPress-Theme haben wir uns für die Genericons Icon Font entschieden. Die Font besitzt zwar keine so riesige Icon-Auswahl, aber für die meisten WordPress-Projekte sind die Icons meiner Ansicht nach vollkommen ausreichend. Außerdem ist Genericons Font von Automattic (der Firma des WordPress-Gründers Matt Mullenweg) speziell für den Einsatz in WordPress-Themes entwickelt worden und hat eine Open Source GPL-Lizenz.

Weiterlesen

Kommentare 5

FitText für skalierbare Texte in responsive Webdesigns

FitText in ein kleines, praktisches JavaScript-Plugin, um Text-Slogans oder andere größere Text-Elemente in responsive Webdesigns automatisch skalierbar zu machen. Mit Hilfe des Scripts passt sich dein Text-Slogan automatisch an die jeweilige Bildschirm-Breite an und wird dadurch immer optimal lesbar dargestellt.

FitText nutzen

FitText für automatisch skalierbare Texte. (Credit: Vektor-Icons von Etienne Mansard)

Das Plugin ist nicht für Fließtexte gedacht, sondern um große Schrift-Slogans, Webseiten-Titel oder Texte in einem großen Header-Bild automatisch an das responsive Design anzupassen. Und so funktioniert die Einbindung des JavaScript-Plugins.

Weiterlesen

Kommentare 8

Link-Tipps: Hilfreiche, kostenlose Online-Tutorials zum Lernen von HTML & CSS

Learn CSS Layout Jeder der mehr über HTML und CSS erfahren möchte, sollte diese zwei wunderschönen Online-Tutorials (nur in englischer Sprache) auf keinen Fall verpassen. Auf der Webseite “Learn CSS Layout” kannst du dich Klick für Klick durch einen praktischen Guide mit vielen modernen CSS-Tipps (auch zur Entwicklung von mobile-ready Websites) durcharbeiten. Die Webseite richtet sich an Anfänger, doch auch geübtere CSS-Fans können auf der übersichtlich gestalteten Seite bestimmt noch so einiges mitnehmen.

Weiterlesen

Kommentare 18

CSS für Anfänger (Teil 1): Deine CSS-Fragen beantwortet

CSS Tipps für Anfaenger Da einem schnell mal der Kopf schwirrt und viele Fragen auftauchen können, wenn man mit CSS noch nicht so vertraut ist, werde ich in den folgenden zwei Artikeln ein paar Antworten zusammen gestellt, die dir den Start in die Arbeit mit CSS hoffentlich erleichtern. Wenn du weitere CSS-Fragen oder hilfreiche CSS-Tipps für Newbies hast, schreibe mir diese doch einfach in einem Kommentar hier im Artikel.

Weiterlesen