Man kann alles in Farbe tunken. Dazu brauchen wir den Hexcode der Farbe die du gerne benutzen möchtest. Der Hexcode sieht im Grundegenommen so aus: #000000 – je nach Farbe ist er natürlich anders, aber das # steht immer davor. Wenn du ein Grafikprogramm wie Photoshop oder Paint Shop Pro hast findest du den Hexcode wenn du die Farbe auswählt. Wenn du kein solches Programm hast, wovon ich ausgehe, hilft dir Google weiter. Wenn du dort nach ‘Farbwähler’ oder ‘Hexcodes’ suchst bekommst du einige Seiten auf denen viele Farben aufgelistet sind und auch die dazugehörigen Hexcodes. Hier ein paar Seiten die dir den Hexcode liefern können:

www.colorpicker.com
www.colorschemedesigner.com

Nun hast du also die Farbe oder bessergesagt die Farben die du benutzen willst. Du solltest natürlich mehrere zusammenpassende Farben suchen damit später nicht alles gleich aussieht. Du kannst zwei Dinge farblich ändern, die Schriften und den Hintergrund von Objekten: Mit background:#DEINHEXCODE; änderst du die Hintergrundfarbe eines Objektes. Mit color:#DEINHEXCODE; änderst du die Schriftfarbe eines Objekts. Weiter geht’s endlich zu den Stellen die du verändern kannst!

Hintergrund

Bei meinen Templates gibt es immer eine feste Hintergrundfarbe, welche du ganz oben im Code findet. Suche diese Stelle und ersetzt den Hexcode der bisher dort stand, dadurch wird die Hintergrundfarbe des Templates geändert:

body {
background:#DEINHEXCODE;
margin: 0px;
padding: 0px;
}

Normale Links

Ich gehe von Oben nach Unten durch den Code. Es gibt zwei Arten von Links in meinen Templates. Die Links der Navigation und die normalen Links an allen anderen Stellen. Ich zeige dir zuerst den normalen Link. Bei beiden kannst du nicht nur die Schriftfarbe sondern auch die Hintergrundfarbe bestimmen. Wenn du gerne eine Hintergrundfarbe hättest, aber keine vorhanden ist, kannst du sie einfach einbauen. a beschreibt den Link in unberührtem Zustand und a:hover den Link wenn du drüber fährst. Die restlichen Attribute kannst du vorerst ignorieren.

a {
color:#DEINHEXCODE;
background:#DEINHEXCODE;
font-size:8pt;
font-family:Arial;
text-decoration:none;
}

a:hover {
background:#DEINHEXCODE;
}

Links in der Navigation

Wie oben beschrieben gibt es zwei Arten von Links in meinen Templates. Wieder kannst du Hintergrund und Schriftfarbe ändern. Die Links in der Navigation haben normalerweise etwas davor stehen. Wie zum Beispiel #navi oder #navigation. Das dient dazu, dass nur die Links in diesem Bereich angesprochen werden, der natürlich im Code definiert ist.

#navi a {
color:#DEINHEXCODE;
background:#DEINHEXCODE;
}

#navi a:hover {
color:#DEINHEXCODE;
background:#DEINHEXCODE;
}

Contenthintergrund

Der Content ist das Feld in dem deine Beiträge stehen und du hast die möglichkeit den Hintergrund davon zu ändern.

.content {
overflow: none;
position: absolute;
left:200px;
top:50px;
width:400px;
background:#DEINHEXCODE;
padding:5px;
}

Überschriften

Du kannst bei deinem Blog mit h1 die Überschriften definieren, so wird die Überschrift im Code auch als h1 bezeichnet. Der Überschrift kannst du auch einen Hintergrund geben, wenn du das möchtest. Es kann auch vorkommen das es mehrere Überschriften gibt, zum Beispiel noch h2 oder h3 die man dann an anderen Stellen benutzen kann um dort andere Überschriften mit anderen Gestaltungen zu benutzen. Hier die Stelle – falls weitere Überschriften vorkommen befinden diese sich untendrunter:

h1 {
color:#DEINHEXCODE;
font-size:14pt;
font-family:Arial;
margin-bottom:0px;
margin-top:10px;
font-weight:bolder;
text-transform:uppercase;
}

Die ‘Textfelder’

Auch Textareas genannt, das sind die Felder in denen du zum Beispiel Gästebucheinträge schreibst und so weiter. Du kannst sowohl die Schriftfarbe als auch die Hintergrundfarbe dieses Eingabefeldes bestimmen. Du kannst bei dem Hintergrund anstelle von einem Hexcode auch none hinschreiben, dadurch hat das Eingabefeld keinen Hintergrund, was heißt das er die gleiche Hintergrundfarbe hat wie der Content sie hat.

textarea, input {
border:1px solid;
color:#DEINHEXCODE;
font-size:8pt;
font-family:Arial;
background:none;
}

Andere Textformationen

Auf jeder Seite und bei jedem Template kann man noch andere Dinge definieren, dazu gehört zum Beispiel die Schrift wenn man dick, kursiv, unterstrichen oder durchgestrichen schreibt. Denen kannst du auch Farben und auch Schriftarten und Größen zuweißen. bold steht für dick, italic steht für kursiv, s oder strike steht für durchgestrichen und underlined steht für unterstrichen. Du musst natürlich keine anderen Farben einsetzen wenn du nicht möchtest.

b, strong {
color:#DEINHEXCODE;
}

i, em {
color:#DEINHEXCODE;
}

s,strike,del {
color:#DEINHEXCODE;
}

u {
color:#DEINHEXCODE;
}

Das wären dann auch schon alle bedeutenden Stellen an denen du in meinen Templates etwas an Farbe verändern kannst. Bei Fragen kannst du dich selbstverständlich an mich wenden. Ich hoffe das Tutorial konnte dir helfen!