Tag38 posts

CSS

  • WordPress Themes für Gutenberg vorbereiten – so funktioniert’s

    WordPress Themes für Gutenberg vorbereiten – so funktioniert’s

    Wie bestimmt viele von euch schon wissen, wird es bald einen neuen WordPress-Editor geben. Wir arbeiten momentan daran, unsere ersten WordPress Themes für diesen neuen Gutenberg-Editor vorzubereiten (Gutenberg ist der Projektname für die Entwicklung des Editors). In unseren WordPress Theme Pukeko haben wir das Gutenberg-Plugin bereits unterstützt. Alle aktuellen Gutenberg-Blocks müssen dabei in den Theme-Styles…

    Read more: WordPress Themes für Gutenberg vorbereiten – so funktioniert’s
  • Einstieg in CSS Grid Layouts

    Einstieg in CSS Grid Layouts

    CSS Grid Layouts sind mit Sicherheit eine der spannendsten Entwicklung in CSS seit Jahren. Es ist im Endeffekt das, wovon alle Webdesigner und Frontend-Entwickler schon immer geträumt haben. Endlich können wir unsere Webseiten direkt in CSS und ohne Hilfe von Javascript-Tricks oder umständlichen CSS-Hacks so umsetzen, wie wir sie auch gestalten, in einem Grid-Layout. Das…

    Read more: Einstieg in CSS Grid Layouts
  • WordPress Theme Anpassung mit eigenem CSS

    WordPress Theme Anpassung mit eigenem CSS

    Seit WordPress 4.7 gibt es direkt im WordPress-Customizer die Option, zusätzliches CSS einzufügen (unter Design/Customizer/Zusätzliches CSS). Diese Funktion bietet eine leichte Möglichkeit, das CSS des Themes oder eines Plugins zu überschreiben oder zu ergänzen. Die passenden CSS-Styles zu finden, ist aber natürlich nicht immer ganz leicht. Daher möchte ich eine kleine Einführung zum Thema CSS-Anpassungen…

    Read more: WordPress Theme Anpassung mit eigenem CSS
  • 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. (mehr …)

  • 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…

    Read more: Buch-Tipp: Sass for Web Designers von Dan Cederholm bei A Book Apart
  • Link-Tipps: Hilfreiche, kostenlose Online-Tutorials zum Lernen von HTML & CSS

    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,…

    Read more: Link-Tipps: Hilfreiche, kostenlose Online-Tutorials zum Lernen von HTML & CSS
Expand sidebarB