[WordPress] ‚EINS‘ – Mein erstes WordPress-Theme

Nun ist es endlich vollbracht: mein erstes WordPress-Theme. Nach monatelanger Arbeit, zahlreichen schlaflosen Nächten (und Tagen) sowie ausgiebigen Tests kann ich nun endlich mein Debüt als Theme-Designer feiern.

Darf ich vorstellen: ‚EINS‘ – mein erstes deutschsprachiges WordPress-Theme:

Highlights:

  • Layout ist komplett CSS-basiert (keine Grafiken)
  • Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9, Android und iOS 5 getestet)
  • responsives Layout (CSS3 media queries) angepasst für Tablets (bis 1024px) und Smartphones (bis 480px)
  • Post-Thumbnail-Funktion integriert
  • vorbereitetes Gästebuch-Template

Hier gibt’s die Live-Demo zum ausgiebigen testen:

und hier den Download:

Weiterlesen →

[Uncharted] Die Trilogie in Film-Form

Uncharted-Fans anwesend? Da hat sich doch tatsächlich ein Fan der Serie hingesetzt und zu den drei bisher erschienenen Teilen jeweils einen Film zusammengebastelt. Dazu hat er hauptsächlich die Zwischensequenzen der Spiele genutzt.

“Uncharted 1: Drake’s Fortune” 1:53 Stunden Spieldauer

“Uncharted 2: Among Thieves” 2:57 Stunden Spieldauer

“Uncharted 3: Drake’s Deception” 3:16 Stunden Spieldauer

Auch wenn der Ton englisch ist, anschauen ist Pflicht.

[CSS3] Ein horizontales Dropdown-Menü erstellen

Ich habe mir schon lange vorgenommen mal ein Tutorial für ein horizontales Dropdown-Menü zu erstellen. Und da ich gerade mal wieder ein wenig Zeit und Lust hatte, habe ich mal hingesetzt und ein wenig ausprobiert.

Das ist dabei rausgekommen:

Wenn ihr ebenfalls etwas Zeit und Lust mitbringt, zeige ich in diesem Tutorial, wie ihr ein schickes horizontales Dropdown-Menü erstellt. Das Menü wird, mit Ausnahme der Hauptmenü-Icons, CSS-only, wir verwenden also keine Bilddateien.

Weiterlesen →

[CSS3] Die Pseudo-Klasse :target im Detail

Ich habe vor kurzem in diesem Artikel einige Pseudo-Elemente vorgestellt und auch Beispiele für den praktischen Einsatz aufgezeigt. Ein Element habe ich dabei bewusst ausgelassen, da es sich definitiv lohnt, es genauer vorzustellen: die Pseudo-Klasse :target.

Wie der Name schon verrät (target (englisch) = Ziel), wird die Klasse aktiv, wenn das dazugehörige Element aufgerufen oder Ziel einer Aktion ist. Mittels :target können bestimmte Elemente oder Bereiche auf der Webseite angesprochen und formatiert werden.

So lässt sich beispielsweise die Schriftfarbe ändern, wenn das entsprechende Element aufgerufen wird. Die simple Style-Deklaration dafür wäre wie folgt:

#absatz {
color: #fff;
}

#absatz:target {
color: #000;
}

Stellt sich nur die Frage, wie die ID absatz als Ziel aufgerufen werden kann. Vielleicht ist bekannt, dass IDs als Ankerpunkt genutzt werden können. Beispielsweise kann ich mit dem Link

http://www.olivergast.de/gb/#comments

direkt zum Kommentarformular des Gästebuchs springen, ohne das Gästebuch aufrufen und zum Kommentarformular scrollen zu müssen.

Und so können wir im obigen Beispiel durch einen direkten Link auf das Element dessen Schriftfarbe ändern:

<a class="button" href="http://www.einbeispiel.de/seite/#absatz">Schriftfarbe ändern</a>

Klar soweit?

Weiterlesen →

[XBMC] „Eden“ mit direkter Unterstützung für Movie sets

Kennt ihr sicher: ihr habt Film-Serien, die vom Titel her nicht einheitlich benannt sind. Insbesondere bei eingedeutschten Titeln ist das oftmals der Fall. Folge: die Filme werden in der Filmansicht nicht hintereinander aufgeführt.

Beispiel:

  • Lethal Weapon
  • Lethal Weapon 2 – Brennpunkt L.A.
  • Brennpunkt L.A.: Die Profis sind zurück
  • Lethal Weapon 4 – Zwei Profis räumen auf

Um die Filme zusammenhängend zu gruppieren gibt es die Movie sets-Funktion.

Das ist quasi ein Ordner, in den alle Filme der Reihe eingeordnet werden.

Okay. Movie Sets gibt es nicht erst seit Version 11, aber der Umgang mit Movie sets ist mit Veröffentlichung von „Eden“ wesentlich einfacher und direkt in das XBMC eingebunden. Musste man vor Version 11 manuell mit .nfo-Dateien hantieren, reicht es nun eine Option in den Einstellungen zu aktivieren.

Diese Anleitung bezieht sich auf das XBMC in Version 11 (Eden). Weitere Voraussetzung ist der Datenbankmodus sowie die Nutzung des Scrapers The MovieDB.

Weiterlesen →

[CSS3] WordPress-Banner mit Pseudoelementen

Ich habe vor kurzem auf einer Webseite ein hängendes Werbebanner mit verschieden angeordneten Buchstaben gesehen, welches als Bilddatei eingebunden wurde. Sah klasse aus und da habe ich mir gedacht, dass das auch per CSS3 – gänzlich ohne Grafikdateien – umgesetzt werden könnte. Also habe ich mich mal hingesetzt und dabei kam dann das hier raus:

Habt ihr Lust das Banner nachzubauen?

Weiterlesen →

[XBMC] Ganz im Stile des neuen Xbox-Dashboards

Das Erscheinungsbild von XBMC kann ja bekanntlich durch Skins angepasst werden. Ein neuer Skin und schon erstrahlt das XBMC in neuem Glanz. Aber welchen Skin nehmen bei der Auswahl. Ich nutze seit kurzem den Skin Xperience1080 von „Black“. Wer auf das neue Xbox-Dashboard oder das Metro-Design von Microsoft steht, für den ist dieser Skin ein Muss.

Der Skin ist zwar noch im Beta-Status, läuft aber auf meinem Windows-Rechner sehr zuverlässig und äußert flüssig. Für das Apple TV 2 ist der Skin leider weniger geeignet. Da merkt man dann doch die beschränkte Leistung der kleinen schwarzen Box.

Weiterlesen →

[XBMC] Update auf Eden (11.0) steht bereit

Nach über einjähriger Entwicklung steht seit kurzem die neueste Version des XBMC „Eden“ (Version 11.0) zum Download bereit. Wer bereits die Betas oder Release Candidates getestet hat, bringt die finale Version natürlich wenig Neuerungen.

Für Nutzer von Dharma (Version 10) ändert sich jedoch eine Menge, insbesondere unter der Haube. Das Interface bleibt weitgehend unverändert.

Highlights der neuen Version:

XBMC 11.0 Milestones include Addon Rollbacks, vast improvements in Confluence (the default skin), massive speed increases via features like Dirty-region rendering and the new JPEG decoder, a simpler, better library, movie set scraping, additional protocol handling, better networking support, better handling of unencrypted BluRay content and structures, adjustable display refresh rate in OSX (to match the already available feature in Windows and Linux), AirPlay support, an upgraded weather service with geoip lookup, and much, much more.

Das komplette Changelog könnt ihr hier einsehen. Den Download gibt es hier.

[CSS3] Slideshow mit „keyframes“

Interessante Inhalte der eigenen Webseite auf interessante Art und Weise zu präsentieren ist wohl das Ziel eines jeden Webseitenbetreibers. Dem Besucher stechen dabei bewegte Bilder und Animationen natürlich besonders ins Auge. Mit keyframe-Animationen gibt es unzählige Möglichkeiten das Interesse des Besuchers auf einen bestimmten Bereich zu lenken.

Wie wäre es mit einer Slideshow? In diesem Tutorial zeige ich, wie ihr vier Artikel in einer Endlosschleife animiert für eure Besucher präsentiert?

Vorschau gefällig?

Weiterlesen →

[Dropbox] Eure Musikbibliothek überall verfügbar

Dropbox kennt mittlerweile wohl fast jeder, oder? Nochmal kurz erklärt: bei Dropbox gibt es kostenlosen Webspeicherplatz (2 GB) auf den per PC, Smartphone oder Tablet zugegriffen werden kann. Dropbox zeichnet sich dadurch aus, dass Inhalte, die im lokalen Dropbox-Ordner gespeichert werden sofort auf den Webspeicher synchronisiert werden und dadurch auf allen Computern, Smartphones oder Tablets, auf denen der Client installiert ist, immer synchron sind.

Derzeit könnt ihr bei Dropbox zusätzlich zu den kostenlosen 2 GB weitere 5 GB Speicherplatz abgreifen. Ihr müsst dazu lediglich Beta-Tester spielen und das automatische Upload-Feature für Fotos nutzen (hier gibt es dazu eine Anleitung). Und das Schöne: der zusätzliche Speicherplatz bleibt auch künftig kostenlos erhalten.

Mit den zusätzlichen 5 GB kommt man so auf 7 GB Speicherplatz. Was mit so viel Speicherplatz machen? Ich habe in diesem oder diesem Artikel ja schon einige Möglichkeiten gezeigt. Aber ich habe noch eine interessante für euch.

Habt ihr schon einmal darüber nachgedacht, eure Musikbibliothek in die Dropbox zu verschieben? So habt ihr (fast) überall Zugriff auf die Songs und sofern ihr mehrere Computer nutzt, eine synchrone Musikbibliothek. Ist doch klasse, wenn man zuhause und auf dem Büro-PC auf die gleiche Musik zugreifen kann, oder?

Weiterlesen →