Home Thesis Theme, Tutorials >> Thesis Theme Design – Hintergrundbild und Farben

Thesis Theme Design – Hintergrundbild und Farben

6. Februar 2012

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

In diesem zweiten Artikel der Thesis Theme Design Reihe möchte ich auf die Farblichen Einstellungen eingehen. Dabei fügen wir ein Hintergrundbild ein und ich erkläre die Einstellungen im Content Bereich des Thesis Themes.

Das farbliche Design des Blogs ist eine der ersten Eigenschaften, die man überhaupt einstellt. Oft sind die gewünschten Farben bereits als Idee im Kopf. Das Thesis Theme macht es wirklich einfach die Farben einzustellen und auch ganz spezielle Elemente können angesprochen werden. Beginnen wir mit den Einstellungen des Themes.

Thesis Theme Farben Design

Zunächst einmal wechselt man in die Thesis Design Options. Wir beschäftigen uns heute mit dem Reiter Fonts, Colors, and More!

Body (and Content Area)
thesis-site-layout2Hier kann man die Schriftart auswählen, die man im Blog nutzen möchte. Schriftarten, die mit einem * markiert sind, sind Sogenannte „Web Safe Fonts“. Diese können von jedem Browser dargestellt werden.

Site Background Color: Der Hintergrund der kompletten Seite
Page Background Color: Hintergrund des Inhaltsbereichs
primary Text Color: Die Farbe der Schrift
primary link color: Farbe der Links

Die beiden Radio Buttons haben folgende Funktion: Der eine erstellt einen Schatten um den Blog herum und der zweite trennt die einzelnen Design elemente durch Linien in der Ausgabe. Ich persönlich nutze beides. Die Linien sind abgeschaltet und der Schatten ist eingeschaltet.

Content Area
Hier kann die Größe der Schrift gewählt werden. Diese Angabe ist eine Bezugsgröße. Alle folgenden „Inherit“ Werte beziehen sich auf diesen Wert.

Nav Menü
Hier kann das komplette Menü angepasst werden.

Link Text Color: Die Farbe der Links im normalen Zustand
Link Text Hover Color: Die Farbe der Links, wenn man mit der Maus darüber fährt
current Link Text Color: Farbe des aktuell aktiven (angeklickten) Links

Die folgenden vier Eigenschaften geben die gleichen Zustände an, beziehen sich aber auf den Hintergrund der Links. Man könnte das als „Button“ bezeichnen und den Link als „Button Beschriftung“.

Nav Border width (px): Hier wird die Breite der Umrandung der Navigation angegeben.

Nav Border Color: Hier die Farbe der Umrandung.

Submenu width: Wenn man ein verschachteltes Menü hat, kann man hier die breite der unteren Ebenen angeben.

Header
Hier können als erstes die Schriftgröße und Farbe für die Überschrift angegeben werden. Ich nutze diese Überschrift in meinen Blogs aber gar nicht, sondern setze ein Bild im Header ein.
Anschließend kann in diesem Menü auch noch die Tagline angepasst werden. Das ist die kleine Zeile, in der die Tags aufgelistet sind.

Headlines
Hier kommen die im Text eingesetzten Überschriften zur Geltung. Die Tags < h2 > oder < h3 > können hier definiert werden.

Bylines and Post Meta Data
Hier kann die Schriftart, die Größe und die Farbe der Byline eingestellt werden. Die ByLine enthält die Angaben zum Author, Datum usw.

Alle weiteren Einstellungen wie Multimedia Box, Sidebars und Footer kann man analog vornehmen. Allerdings ziehe ich es vor, das über die custom.css einzustellen, da ich mit diesen Bereichen noch weitere Veränderungen vorhabe. Die Multimedia Box beispielsweise nutze ich gar nicht.

Hintergrund Farbe einfügen

Wenn man dem Blog eine Hintergrundfarbe verpassen möchte, kann man das in den oben erwähnten Einstellungen tun, oder aber in der Datei custom.css. Dazu öffnet man diese und fügt dort folgenden Code ein:

body.custom {background:#c9d3c0;}

quick-color

Quick Color Reference - Farbe per Mausklick auswählen

So kann man sich die Farbe einstellen, die man gerne nutzen möchte. Sehr hilfreich ist dabei auch der in Thesis eingebaute „Color Picker“ der die Farben visuell darstellt. Das Bild ist durch die Minimierung nicht ganz deutlich. Es werden die Farbverläufe ganz klar dargestellt, wie zum Beispiel auch in Photoshop.

Hintergrundbild einfügen

Eine weitere Möglichkeit ist der Einbau eines Hintergrundbildes. Das geht ebenfalls in der custom.css. Dazu wählt man zunächst ein Bild aus und lädt es auf den Server hoch. Die URL merkt man sich, weil man sie später in den folgenden CSS Code einfügen muss:

body.custom {background:#c9d3c0 url('http://URL-ZU-DEINEM-BILD.png') repeat-x;}

Ich habe mal in meinem Testblog einen Screenshot gemacht, der zeigt, wie das Aussehen kann.

Fortschritt Testblog

Neben einem Hintergrundbild habe ich die Schatten im Design aktiviert und die internen Begrenzungen entfernt. Der Blog sieht nun so aus:

thesis-demo2

Dabei habe ich einen Verlauf in Photoshop erstellt, der nur 5 Pixel breit ist und wiederholt wird. Dadurch habe ich eine sehr kleine Datei, aber einen großen Effekt. Die Abstufungen im Bild sind übrigens nur hier auf dem Screenshot zu sehen, da ich die Dateien immer minimiere. Im Blog sieht das nicht so aus, sondern ist ein flüssiger Verlauf.

Solche Verläufe können mittlerweile auch mit Css3 erstellt wird. Wie das gemacht wird, erkläre ich aber an anderer Stelle.

Tipp: Das Hintergrundbild sollte so klein wie irgend möglich sein. Ein großes Bild beeinträchtigt die Ladezeit des Blogs zu sehr. Besser ist es hier mit den Wiederholungen von CSS zu arbeiten.

Hintergrundbild und Farben mit dem Thesis Theme – Mein Fazit

Die Farben und Hintergründe lassen sich mit dem Thesis Theme wirklich sehr einfach einstellen. Besonders schön funktionert das mit dem integrierten Color Picker (quick color reference). So muss man nicht ständig auf die Suche nach der richtigen Farbe ins Web oder in das Grafikprogramm abtauchen.
Dazu lassen sich Farben und Bilder sehr schnell austauschen. Wenn man die Farben für den eigenen Blog schon im Hinterkopf hat, geht es zudem auch noch sehr schnell. Damit haben wir in dieser Serie bereits das Grundgerüst und die Farbwahl für unseren Blog festgelegt. Im nächsten Schritt beginnen wir mit der Umgestaltung des Headers.
Verpasse keine Folge der Artikelserie und abonniere mein RSS-Feed. Natürlich kostenlos.

Bleib in Verbindung via...

RSS abonnieren Facebook Fan werden Follow Me

{ 3 comments… read them below or add one }

1 Boris Februar 6, 2012 um 11:47

Hi Sascha,

Danke für die Reihe und für die Tipps.
Lese die ganze Zeit mit und wollte mich bedanken.

Boris

2 Fabian Februar 6, 2012 um 22:25

Interessant diese “Teil-Artikel”. Kommen da noch weiter Tipps zu diesem Theme?

3 Sascha Februar 7, 2012 um 08:45

Hallo Fabian,
es sind schon noch einige Artikel geplant. Ich hoffe sie helfen auch weiter.
Vg Sascha

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