Home Thesis Theme, Tutorials >> Thesis Theme Design – Die Sidebar umgestalten

Thesis Theme Design – Die Sidebar umgestalten

20. Februar 2012

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Die Sidebar eines Blogs ist Dreh und Angelpunkt. Damit spielt sie eine zentrale Rolle für den Besucher, der sich hier weiter orientieren kann. Wie man die Sidebar gestalten kann, erfährst Du in diesem Artikel.

Die Sidebar erhält ihre Einstellungen über die Thesis Design Options im Unterpunkt „Fonts, Colors and More“. Die dortigen Möglichkeiten sind aber bei weitem nicht ausreichend, so dass uns hier nichts anderes übrig bleibt, als in die custom.css einzugreifen.

Sidebar Überschriften

Die Überschriften der Sidebar iim Thesis Theme sind grundsätzlich groß geschrieben. Das wird über die CSS Eigenschaft text-transform:uppercase gelöst. Wer das gerne ändern möchte, dem stehen folgende CSS Eigenschaften zur Verfügung:

  • capitalize = Wortanfänge als Großbuchstaben.
  • uppercase = Nur Großbuchstaben.
  • lowercase = Nur Kleinbuchstaben.
  • none = normal (keine Text-Transformation).

Die Sidebar Überschriften haben eine eigene ansprechbare CSS Klasse. Am Beispiel der Überschriften kann man das sehr schön verdeutlichen:

.custom .sidebar h3{font-size:18pt;font-weight:bold;}

Hier habe ich die Schriftgröße der Überschrift auf 18 pt gesetzt und gleichzeitig die Variante „Fett“ genutzt.
Wie unschwer zu erkennen ist, wird hier wieder eine .custom Klasse verwendet, was im Thesis Theme üblich ist.

Sidebar Widgets komplett

Natürlich gibt es eine ganze Reihe weiterer Klassen, die für die Sidebar angesprochen werden können. In diesem Abschnitt gehe ich speziell auf die Widgets ein.

Zunächst einmal machen wir uns kurz den Aufbau eines solchen Widgets bewusst. Dazu habe ich eine kleine Grafik gezeichnet.

widget

Kommentar Widget


.custom .sidebar h3 – Für den gelben Bereich (Überschrift)
.custom li.widget ul li – Der Lila Bereich (Einzelne Einträge im Widget – Liste!!!)
.custom li.widget ul – Der übergeordnete Listenteil

Die Überschrift ein sich hatte ich ja bereits erklärt. Die ul Eigenschaft definiert die ungeordnete Liste. Hier können Eigenschaften angegeben werden, welche die Liste an sich gestalten. Zum Beispiel die Option „list-style-type“.

Die Zweite Option (.custom li.widget ul li) definiert die einzelnen Punkte der Liste. Schriftfarbe, Schriftgröße und alles weitere kann hier definiert werden.

Dann kommen noch natürlich noch eine andere Klasse, die das Widget komplett verändern kann.

.custom li.widget – Hier kann man Eigenschaften des Widgets selber definieren. Zum Beispiel den Abstand zum nächsten Widget, den Hintergrund des Widgets und vieles mehr.

Um das Ganze einmal zu demonstrieren, habe ich ein Widget im Testblog eingesetzt und per CSS verändert. Dabei habe ich folgende Einstellungen genutzt:

//Sidebar Widgets verändern
.custom .sidebar_1 h3{font-size:20pt;font-weight:bold;font-variant:small-caps;}
.custom .sidebar_2 h3{font-size:20pt;font-weight:bold;font-variant:small-caps;}
.custom .sidebar h3{font-size:20pt;font-weight:bold;font-variant:small-caps;}
.custom li.widget {background:#F0F0F0;border: 0.1em solid #C7C7C7;padding:0.5em;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;margin-left:-6px}
.custom li.widget ul li{background:#F0F0F0;border-bottom: 2px solid #C7C7C7;-moz-border-radius:4px;padding:0.5em;margin:0.5em;}

Die Widgets sehen damit schon mal recht ordentlich aus. Als nächstes fehlen noch ein grundsätzliche Widgets, die ich dort einfügen werde. Auf eine Besonderheit des Thesis Themes werde ich aber auch noch eingehen.

Thesis Hook After Sidebar

Das Thesis Theme arbeitet mit sogenannten Hooks, die einen Eingriff überall im Theme erlauben. So kann mit Hilfe des Hooks „After_Sidebars“ oder „before_Sidebars“ vor oder nach der normalen Sidebar noch weiterer Inhalt eingefügt werden.
Dazu kann man das Thesis Openhook Plugin verwenden oder aber man schreibt die Funktionen direkt in die „custom_functions.php“.

Fortschritt Testblog

Natürlich habe ich die Änderungen auch direkt wieder umgesetzt. Dazu habe ich wieder einen Screenshot erstellt. Schaut selbst. Auch das Headerwidget ist nun leichter zu erkennen.
thesis-demo4

Die Sidebar vom Thesis Theme umgestalten – Mein Fazit

Es gibt sicherlich eine ganze Reihe weiterer Modikationen. Aber die eben vorgestellten sind die gängigsten und reichen auch für den Anfang. Später werde ich mal einen Artikel über fortgeschrittene Modifikationen schreiben. Im nächsten Artikel beschäftige ich mich aber erst einmal mit dem Footer. Dort kommen Widgets hinein, und das aussehen werde ich ein wenig verändern. Damit Du diesen Artikel nicht verpasst, abonniere doch mein RSS-Feed.

Bleib in Verbindung via...

RSS abonnieren Facebook Fan werden Follow Me

{ 2 comments… read them below or add one }

1 Andreas Februar 20, 2012 um 21:56

Hab gesehen das du recht viel und interessantes über dieses Thesis Theme schreibst, kann man das irgendwo herunterladen.

2 Sascha Februar 20, 2012 um 22:02

Bisher nicht, aber ich plane ein Ebook mit Thesis Theme Tutorials.

Leave a Comment

Hinweis: Nur echte Namen verwenden | Keine Verweise auf Unterseiten! Ich lösche solche Kommentare!

Previous post:

Next post:

Letzte Artikel

  • spielcasino.net Für Zwischendurch – Online zocken und Zeit vertreiben
    Verauchte Säle, Whiskey und Pokerkarten. Dazu viele verruchte Gestalten, die an dem Spieltisch ihr letztes Hab und Gut einsetzen. Der Stoff aus dem viele Filme geschmiedet sind. Waren es früher die restlichen Dollars, die von den Cowboys verzockt w...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #11 – Eine Woche gar nichts mehr
    Eine ganze Woche lang habe ich überhaupt nichts gemacht. Das lag zum einen einer Operation an meinem Knie, die ich auskuriert habe, und zum anderen an dem Testtool, das mir einfach keine neuen Werte ausgegeben hat. Jede Serie braucht einen Abschl...Mehr lesen...
  • Premium Themes aus Deutschland WordPress Theme gesucht? Hier wirst Du fündig!
    Immer mal wieder bastelt ein Blogger am eigenen Blog herum, weil er vielleicht die Optik nicht mehr ertragen kann. Mir geht das regelmäßig einmal im Jahr so. Und oft schaue ich mir dann die ganzen Theme Schmieden an, um herauszufinden, was es denn...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #10 – Halbzeit
    Die Hälfte ist geschafft. Social Bookmarking im 20 Tage oder 20 Bookmarks Test. Wie viel Ranking bringen Social Bookmarks? Was bringen sie überhaupt? Diese Frage soll diese Case Study beantworten. Deshalb habe ich mir einen Artikel aus meinem Ar...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #9 – Leichter Abfall des Rankings
    Ein neuer Tag in meiner SEO Case Study. Das Social Bookmarking hat mich bisher um rund 50 Plätze nach oben verschoben und heute ging es wieder ein wenig bergab. Glücklicherweise nur um einen einzigen Platz, den ich hoffentlich heute wieder aufho...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #8 – Bergsteiger Artikel
    Das Social Bookmarking, das in den letzten Monaten so furchtbar an Strafen von Google gelitten hat, wird derzeit auf die Probe gestellt. Welche Auswirkungen hat es noch auf das Ranking? Und wirkt es überhaupt? Google ist sehr streng gegen alle m...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #7 – Erneut ein Stückchen hoch
    Nachdem ich gestern über Stagnation geklagt habe, scheint Google meinen Ruf gehört zu haben und schiebt den Artikel wieder drei Plätze nach oben auf Platz 68. Damit habe ich Seite sechs im Ranking erreicht. Das nächste Ziel muss also lauten ...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #6 – Stagnation
    Social Bookmarking hat nach dem Google Penguin Update an Bedeutung verloren. Darin sind sich fast alle einig. Die Kommentare, die ich hier im Blog oder per Email bekommen habe, belegen das. Dennoch soll meine Case Study dahingehend für mich Klarheit...Mehr lesen...

Warum dieser Blog?

  • Geld verdienen im Internet

    ist der Traum vieler. BlogVerdiener beschäftigt sich mit den Möglichkeiten und vor allem mit den einzelnen Anbietern, die das Geld verdienen im Internet möglich machen. Dabei werden die Anbieter vorgestellt und in gewissen Zeiträumen immer wieder getestet. Das Hauptaugenmerk liegt dabei auf Seriosität. Betreffend der Auszahlungen, aber auch den Support. BlogVerdiener propagiert nicht den schnellen Reichtum im Internet, sondern soll aufzeigen, wie durch Arbeit im Netz Geld verdient wird. Ob als Texter, über Social Media Profile bis hin zu Youtube Videos, hier steht alles auf dem Prüfstand.

    Zusätzlich veröffentliche ich regelmäßig Tutorials, die zeigen sollen, wie man die Anbieter zum Geld verdienen benutzt. Auch ist mir wichtig den Verdienst immer weiter zu steigern. Jeder getestete und hier eingesetzte Anbieter soll monatlich die Auszahlungsgrenze überschreiten. Das Ziel ist es sich ein Online Einkommen aufzubauen, dass so groß ist, und so dauerhaft ist, dass ich mir keine Sorgen um meine Rente machen muss und sogar bereits mit 40 Jahren meinen Antrag stellen kann.

    Geld verdienen im Internet – Mit Arbeit und viel Lernen verbunden, ist es doch eine Beschäftigung die Spaß macht, gleichgesinnte vernetzt und tolle Partnerschaften ermöglicht.

    Ursprünglich war BlogVerdiener ein Hobby. Ich wollte mich mit der Möglichkeit beschäftigen „Geld im Internet“ zu verdienen. Daraus ist aber so viel geworden, dass ich es irgendwann aufschreiben musste und wollte. Zunächst bin ich auf einem anderen Blog gestartet, der aber BlogVerdiener weichen musste.

    Das Geld verdienen im Internet ist eine sehr spannende Sache, die sich ständig entwickelt. Neue Anbieter kommen hinzu, alte verschwinden. Es gibt diverse Themengebiete, in denen man sich selber entwickeln und lernen kann. Das ist der Punkt, der auf mich eine so unglaublich große Faszination ausübt. Und nicht zuletzt natürlich mein stetig wachsender Kontostand.

    Es macht Spaß Anbieter zu testen und dann für den eigenen Blog die Optimierungsarbeit zu leisten. So kann ich lernen, ausprobieren und nebenbei noch Geld verdienen. Dieser Gedanke ist irgendwann aber zu Ende gewesen.

    Jetzt ist das Hauptziel von BlogVerdiener das Geld verdienen im Internet reproduzierbar zu machen, so dass es für jeden funktioniert. Der Aufwand soll minimiert werden und das Ergebnis stetig verbessert.

Highlights

  • Geld verdienen im Internet mit Beispielen zu Belegen gehört sicherlich zu den Highlights hier im Blog. Hin und wieder starte ich 30 Tage Tests, in denen mehrere Anbieter der gleichen Branche gegeneinander antreten müssen. So zum Beispiel Februar 2013. Für diesen Monat gibt es die Mini Verdienst Challenge, in der ich diverse Anbieter, mit denen auf Facebook Geld verdienen möglich ist, gegeneinander antreten ließ. Das Ergebnis ist eine Seite hier im Blog, die alle Details haarklein auflistet und einige Anbieter für jedermann empfiehlt.

    So kann sich auch die Hausfrau einen netten Nebenverdienst aufbauen, ohne vorher teure Produkte zu kaufen oder anders auf die Nase zu fallen.

    Ein weiteres Highlight sind sicherlich die Empfehlungen der getesteten Fachbücher. Geballtes Wissen für angehende Blogger und Webmaster. Hier stecke ich viel Arbeit und Mühe hinein.

    Das dritte erwähnenswerte Highlight sind Tutorials, in denen ich mich mit dem Thesis Theme, CSS3, HTML5 und Wordpress auseinander setze. Hier kann vieles für andere Blogs adaptiert werden.

50 Suchanfragen

Kontakt