Wie ging das nochmal?

Eigenes Design (Version 1)

Wichtig: Bitte Nachfragen wenn etwas nicht klar ist oder nicht funktioniert und Rückmeldung, per Kommentar geben ob es gut erklärt und verständlich ist

1. Wie kann ich das Aussehen von meinem Blog verändern?

• Gehe auf deine Admin-Seite
• Klicke auf “Themes”
• Klicke auf “Theme-Editor”, dort findest du hier eingefügte Schrift-Bild ( das ganze sieht auf den ersten Blick wahrscheinlich total kompliziert aus, iss e aber gar nicht, also lass sich bitte davon nicht abschrecken )
• ich habe jetzt bei den einzelnen Punkten Gebrauchsanweisungen eingefügt die dich leiten
• Tipp: alles was ihr ergänzen könnt habe ich in schräge Schrift gesetzt




*/

/* — Seitenhintergrund — */
body { background: pink; }

• hier kannst du die Hintergrund- Farbe ändern, auf dem dein Block liegt
• Ein Experiment!
• du siehst das bei mir hinter “backround” “pink” steht und bei dir “#eee”
• mach mir das mal nach und kuck was passiert indem du “datei aktualisieren” klickst und dann auf deiner Front-Seite F5 drückt
• voila

/* — Header —*/

• Hier kannst du ein Bild einfügen
• das Bild kannst unter “Schreiben” hochladen
• klicke auf “Verwalten” und dann auf “Mediathek”
• klicke mit rechts auf das Bild und klicke dann auf “Copy Link Location”
• gehe nun wieder in den Theme-Editor
• lösche nun alles was in der Klammer hinter “#header { background: url” steht
• füge nun das ein was du vorher kopiert hast

#header { background: url(‘images/head.png’)

• Um die Hintergrundfarbe für da Bild zu ändern, ändere die Farbe hinter border: 20px solid
• Experiment:
• ersetze “white” mit “black” und kuck mal was passiert

no-repeat white; border: 20px solid black; }

• Die Überschrift ( z.B.: Wie ging das nochmal?)
• ändere die Farbe hinter ” #header h1 a { color:”
• Die Unterüberschrift (z.B.: Hilfestellung für jogspace.net)
• ändere die Farbe hinter ” #description { color:”

#header h1 a { color: pink; }
#header
#description { color: pink; }
/* — Navigation — */

( Navigation meint die Zeile in der die Namen der versch. Seiten stehen, wie Home, Über mich usw…)

• Um die Hintergrund-Farbe der Navigationsleiste zu ändern
• ändere die Farbe hinter “#navigation { background:”

#navigation { background: black; }

• Um die Hintergrund-Farbe unter dem Links zur Seite zu ändern
• ändere die Farbe hinter ” ul li a { background:”
• Um die Schrift-Farbe des Links zur Seite zu ändern
• ändere die Farbe hinter ” color:”

#navigation
ul li a { background: pink;
color: #333333; }

• Um die Hintergrund-Farbe der Schrift beim darüber Schweben zu ändern
• ändere die Farbe hinter ” ul li a:hover { background:”
• Um die Farbe der Schrift beim darüber Schweben zu ändern
• ändere die Farbe hinter ” color:”

#navigation
ul li a:hover { background: #333333;
color: white; }

• Um die Hintergrund-Farbe der Schrift beim darauf Klicken zu ändern
• ändere die Farbe hinter ” ul li a:focus { background:”
• Um die Farbe der Schrift beim darauf Klicken zu ändern
• ändere die Farbe hinter ” color:”

#navigation
ul li a:focus { background: #333333;
color: white; }

/* Hauptteil */

(Hauptteil mein die Leite in denen deine Neuen Beiträge erscheinen)

• Um die Hintergrund-Farbe zu ändern
• ändere die Farbe hinter ” #main { background:”
• Um die Schrift-Farbe zu ändern
• ändere die Farbe hinter ” color:”

#main { background: orange;
color: #999999; }

• Um die Farbe der Links zu ändern
• ändere die Farbe hinter “main a / color: “
• Um die Farbe der Links zu ändern die erscheint wenn man darüber schwebt
• ändere die Farbe hinter ” #main a:hover { color: “

#main a { color: #666; }
#main a:hover { color: #333; }

• Um die Hintergrund-Farbe des Datum-Kasten zu ändern
• ändere die Farbe hinter “#main .meta { background: url(”images/time.png”) center left no-repeat “
• Um die Umrandungs-Farbe des Datum-Kasten zu ändern
• ändere die Farbe hinter ” border: 1px solid “

#main .meta { background: url(”images/time.png”) center left no-repeat #fafafa;
border: 1px solid #f3f4f4; }

• Um die Hintergrund-Farbe des Datum-Kasten zu ändern
• ändere die Farbe hinter “#main .cats { background: url(”images/tag_blue.png”) center left no-repeat “
• Um die Umrandungs-Farbe des Datum-Kasten zu ändern
• ändere die Farbe hinter ” border: 1px solid “

#main .cats { background: url(”images/tag_blue.png”) center left no-repeat #fafafa;
border: 1px solid #f3f4f4; }

/* Boxen an der Seite */

(Hiermit it die Leiste am rechten Rand gemeint ( Suche, Links, Kategorien, Kommentare usw…)

• Um die Hintergrund-Farbe zu ändern
• ändere die Farbe hinter “.box { background:”
• Um die Schrift-Farbe zu ändern
• ändere die Farbe hinter ” color: “

.box { background: green;
color: #999999; }

• Um die Farbe der Links zu ändern
• ändere die Farbe hinter “.box a { color:”
• Um die Farbe der Links zu ändern die erscheint wenn man darüber schwebt
• ändere die Farbe hinter ” .box a:hover { color: “

.box a { color: #666; }
.box a:hover { color: #333; }

• Um die Farbe von den Überschrifte( Suche, Kategorien, Links, Freunde, Bleiberecht…) zu ändern
• ändere die Farbe hinter “.box h2 { color: “

.box h2 { color: #666666; }

/* Fuß */

( Fuß meint die Leiste die Ganz unten von deinem Blog steht, unter dem Hauptteil )

• Um die Hintergrund-Farbe zu ändern
• ändere die Farbe hinter “#foot { background: “
• Um die Schrift-Farbe zu ändern
• ändere die Farbe hinter “color: “

#foot { background: white;
color: #99999; }

• Um die Farbe der Links zu ändern
• ändere die Farbe hinter ” #foot a { color:”
• Um die Farbe der Links zu ändern die erscheint wenn man darüber schwebt
• ändere die Farbe hinter ” #foot a:hover { color: “

#foot a { color: #666; }
#foot a:hover { color: #333; }