Alle Artikel der Kategorie “Screencasts

Kommentare 7

Video-Tipp: HTML- und CSS-Elemente schnell im Browser kontrollieren


Im folgenden kleinen Video-Tutorial möchte ich dir kurz zeigen, wie du mit Hilfe des Google Chrome Developer Tools oder der Firefox- und Safari-Erweiterung Firebug HTML und CSS-Elemente einer Webseite direkt im Browser kontrollieren kannst. So kannst du z.B. schnell die CSS-Klasse und die verwendeten CSS-Eigenschaften eines HTML-Elements heraus finden und diese dann gegebenenfalls anpassen oder, wenn du an einem WordPress Child-Theme arbeitest, in deinem eigenen Stylesheet neu definieren. Weiterlesen

Kommentare 44

Video-Tutorial: Ein WordPress Child-Theme erstellen

In dieser kleinen Video-Anleitung erkläre ich, wie du dir in nur ein paar Schritten ein eigenes WordPress Child-Theme erstellen kannst. Ein Child-Theme ist besonders praktisch, um individuelle Anpassungen an einem Theme sicher vorzunehmen. Denn in einem Child-Theme sind deine Anpassungen im Stylesheet und den Template-Dateien auch bei einem späteren Update des Parent-Themes gespeichert. Und damit du auch gleich mit der Erstellung deines eigenen Child-Themes loslegen kannst, habe ich im Anschluss zum Video noch ein Beispiel Child-Theme zum downloaden vorbereitet.


Weiterlesen

Kommentare 18

WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes

In 7. Teil meines WordPress Video-Tutorials zeige ich, wie man den Header des Themes einrichtet. Dabei bearbeite ich die Theme-Datei header.php und zeige die individuelle Menü-Funktion (Custom Menus) in WordPress. Außerdem kannst du dir im Stylesheet anschauen, wie man ein einfaches Dropdown-Menü für die Hauptnavigation des Themes anlegt.

Weiterlesen

Kommentare 7

WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren

Im 5. Teil meines WordPress Video-Tutorials hatte ich beschrieben, wie man ein Theme mit Hilfe von CSS3 Media Queries und dem Viewport Meta-tag für mobile Geräte optimieren kann. Heute zeige ich, wie man die Testdaten des WordPress Theme Unit Test importiert, um so schnell Testinhalte für die eigene Theme-Entwicklung zur Verfügung zu haben. Viel Spaß beim Video schauen :-)

Weiterlesen

Kommentare 7

WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag

Im 4. Teil des Video-Tutorials habe ich die Grundstruktur meines Layouts in den Theme-Dateien angelegt. Heute zeige ich, wie das Layout des WordPress-Themes mit Hilfe von CSS3 Media Queries und dem Viewport meta-tag responsive (engl. für reagierend, ansprechend) machen kann. Ein responsive Layout reagiert auf unterschiedliche Browser-Größen (z.B. bei der Ansicht des Themes auf einem Tablet PC oder einem Smartphone) und passt sich in der Layout-Breite entsprechend an.

Weiterlesen

Kommentare 16

WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen

Im 3. Teil des WordPress-Tutorials habe ich die Theme-Übersetzung mit Hilfe des Codestyling Localization Plugins vorbereitet. Inzwischen habe ich ein wenig am Theme weiter gearbeitet und möchte in diesem Tutorial-Teil zeigen, wie man die erste Grundstruktur des Layouts (Header, Content, Sidebar und Footer) im Theme aufbaut und mit welchen kleinen Tricks ich dabei immer arbeite. Viel Spaß beim Video-Tutorial :-)

Weiterlesen

Kommentare 17

WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung

Nachdem ich im zweiten Teil meines WordPress-Tutorials das Blank-Theme “Toolbox” installiert und angepasst habe werde ich heute zeigen, wie man ein Theme für die Übersetzung in verschiedene Sprachen vorbereitet. Dazu werde ich das praktische Plugin “Codestyling Localization” vorstellen. Viel Spaß beim Teil 4 des Video-Tutorials :-)

Weiterlesen

Kommentare 23

WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme

Im ersten Teil der WordPress Video-Tutorial Serie habe ich gezeigt, wie man WordPress lokal installiert. Im heutigen Tutorial erkläre ich, wie man sich das Blank-Theme “Toolbox” installiert und für die Weiterarbeit an einem eigenen, individuellen WordPress-Theme einrichtet. Dabei bearbeite ich u.a. die functions.php Datei, um einen individuellen Hintergrund (custom background) und Artikelbilder (thumbnails) in meinem Theme zu nutzen. Außerdem bearbeite ich noch die Theme-Info in der style.css Datei, füge ein CSS-Reset ein und tausche das Toolbox Theme-Screenshot gegen mein eigenes Bild aus. Ich wünsche dir viel Spaß beim Tutorial :-)

Weiterlesen