Sidebar-Gestaltung mit Thesis

3. Februar 2009 · 4 Kommentare

Da gestern von Sidebars und ihrer Verwendung die Rede war, möchte ich heute mal an zwei Beispielen zeigen, was Leute aus ihrer Sidebar gemacht haben. Der Look ist in beiden Fällen etwas grungy, was nicht jedem gefällt, aber darauf kommt es hier nicht an. Es soll ja nur die Vielfalt der Möglichkeiten gezeigt werden.

Die Technik dahinter ist nicht schwierig zu verstehen. Es wird alles über CSS gesteuert. Die Überschriften bekommen ein passendes Hintergrundbild und der eigentliche Text wird mit einem text-indent: -9999px aus dem Sichtfeld geschoben, damit er nicht das Hintergundbild überdeckt. Dadurch bleibt er – wenn verlinkt – klickbar.

Beispiel:

{
height: 46px;
background-color: transparent;
background-image: url(images/cat.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
text-indent: -9999px;
}

Hier die Showcases:

High Voltage SEO

highvoltageseo.com

highvoltageseo.com

The Always Upward Blog

alwaysupward.com

alwaysupward.com

Schaut euch einfach die Blogs an und lasst euch von der Gestaltung inspirieren.

Thesis rockt! Get it now! · Live Demo

{ 4 comments }

1 Anthony Hereld 02.04.09 at 13:44

Thanks for the kind words!

2 admin 02.04.09 at 14:12

You’re welcome. Thank you for the inspiring Thesis modification.

3 JackG 08.31.09 at 12:56

Coole Sache mit der Gestaltung der Überschriften.
Kannst du mir sagen wo ich den oben angezeigten Code reinschreibe. In die custom.css datei? Muss ich den Code für jede Überschrift neu schreiben? Kannst du das einfügen der Grafik eventuell noch genauer beschreiben da ich ein Programmier Anfänger bin.

Gruß
JackG

4 admin 08.31.09 at 13:36

Ja, in die custom.css. Den Code musst du für jede Überschrift neu schreiben, weil du ja jeweils eine eigene Grafik einbinden willst. Du musst also für jede einzelne Überschrift den Dateinamen (hier: cat.png) anpassen.

Die Kommentarfunktion ist für diesen Beitrag deaktiviert.