Artikel zum Schlagwort "tutorial"

19. Mai 2012 / Keine Kommentare

[WordPress] Mehrere Sidebars nutzen

WordPress bietet nun schon seit einiger Zeit die Möglichkeit sogenannte Sidebars zu nutzen. In die Sidebar können dann Widgets gelegt werden, die die Webseite interessanter machen. WordPress bietet hier eine ganze Reihe von bereits vorbereiteten Widgets, die im Widgetbereich des Themes per Drag and Drop in die Sidebar geschoben werden können. So können auf einfache Art und Weise die letzten Kommentare, die Schlagwörter, Links und vieles mehr angezeigt werden, ohne dass eine Anpassung am Theme notwendig ist.

In manchen Themes kann der Einsatz von mehr als einer Sidebar sinnvoll sein. Besonders wer viele Widgets nutzt, schafft so mehr Übersicht und kann die Widgets gruppieren. Mit WordPress ist dies relativ einfach zu realisieren.

In diesem Tutorial zeige ich, wie ihr zwei Sidebars in euer Theme einbindet.

Weiterlesen →

3. Mai 2012 / Keine Kommentare

[WordPress] Ein Gästebuch ohne Plugins reloaded

Ich habe vor einiger Zeit in diesem Artikel beschrieben, wie ihr ohne Plugins mittels der WordPress-Kommentarfunktion ein Gästebuch einrichtet. Der Artikel hat ja nun schon einige Zeit auf dem Buckel und zwischenzeitlich haben sich doch ein paar Änderungen bei WordPress, insbesondere beim Aufruf des Kommentarformulars, ergeben.

Da sich der Artikel immer noch großer Beliebtheit erfreut, habe ich mir gedacht, ich bringe ihn mal auf den neuesten Stand und zeige am Beispiel des aktuellen WordPress-Standardthemes „Twenty Eleven“, wie ein Gästebuch mit angepasster Kommentarfunktion realisiert werden kann.

Das fertige Gästebuch wird so aussehen:

Okay. Fangen wir an.

Weiterlesen →

18. April 2012 / 4 Kommentare

[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 →

12. April 2012 / Keine Kommentare

[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:

[css]#absatz {
color: #fff;
}

#absatz:target {
color: #000;
}[/css]

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:

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

Klar soweit?

Weiterlesen →

8. April 2012 / Keine Kommentare

[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 →

6. April 2012 / Keine Kommentare

[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 →

22. Februar 2012 / Keine Kommentare

[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 →

18. Februar 2012 / Keine Kommentare

[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 →

6. Februar 2012 / Keine Kommentare

[iTunes] Umzug inklusive Datenbank auf neuen Rechner

Was macht ihr eigentlich mit eurer iTunes-Datenbank, wenn ihr euch einen neuen Rechner zulegt oder das Betriebssystem neu installiert? Die mühsam zusammengebauten Wiedergabelisten, die Bewertungen, etc.. Alles verloren? Nein, natürlich nicht. Ein Umzug von iTunes ist leichter als vielleicht gedacht.

Natürlich gibt es für diesen Fall einige Tools, die zum Teil auch kostenlos erhältlich sind. Aber dafür extra ein Programm installieren? Muss nicht sein. Ich zeige hier, wie ihr die vorhandene Datenbank auf einen neuen Rechner bzw. ein neues Betriebssystem migriert.

Weiterlesen →

5. Februar 2012 / Keine Kommentare

[CSS3] Mach dir deine eigenen Tooltips

Jeder kennt sie, jeder mag sie. Sagen sie uns doch, was hinter eine Link zum Vorschein kommen wird oder welche Bedeutung ein Bild hat: Tooltips. Tooltips zeigen definierte Attribute eines Hyperlinks, eines Bildes etc. an, wenn wir mit der Maus darüber fahren und dort kurze Zeit verweilen. Nun gibt es unendliche Möglichkeiten das Aussehen eines Hyperlinks zu ändern; das Aussehen eines Tooltips ist im Betriebssystem verankert und kann nicht verändert werden.

Es kann nicht verändert werden? Was soll dann dieser Artikel? Nun, da das Design eines Tooltips nicht verändert werden kann, müssen wir ihn abschalten und ersetzen. Wie gefällt euch diese Lösung:

Anhand eines horizontal ausgerichteten Menüs zeige ich Schritt für Schritt den Weg zu individuell gestalteten Tooltips. Wir nutzen dazu insbesondere die Pseudoelemente :before und :after sowie allerhand CSS3-Kram, wie box-shadow, border-radius und transform.

Weiterlesen →