Schlichtes Design erstellen (Version 2) ♥♥♥

Das Design ist von Mira erstellt und zeigt nur, wie das Endergebnis dieses Tutorials aussehen könnte.

Hallo liebe Leser von CPL, ich bin die Lara, Bloggerin von My heart feels. Ich erstelle gerne und öfter Designs und nun werde ich immer mehr gefragt, ob ich nicht mal ein Tutorial schreiben kann, bezüglich HTML. Um genau zu sein versuche ich Euch heute zu erklären, wie man selbst und leicht ein einfaches Design erstellen kann.
Vorab: Im HTML Fenster könnt Ihr nach Begriffen suchen indem Ihr auf STRG und F drückt.




Bevor Ihr startet:
Das Design bezieht sich nur auf die Blogger Vorlagen von 2006, da ich diese auf Blogspot nicht mehr finden kann, ladet Euch dieses Design herunter! (Je nachdem was euch besser gefällt, nehmt ihr "Minima Sidebar Links" oder "Minima Sidebar rechts") Geht zum hochladen des Designs auf euer Dashbord dann auf Vorlage und drückt auf Backup/Wiederherstellung und ladet das Design hoch. { siehe Screenshot }
Löscht dann am besten alle Gadgets bei Layout.

Tipp: Ladet Euch lieber erst bei dem orangem Button Euer bisheriges Design runter, damit - falls was schief läuft, nicht euer Design komplett entstellt ist.
Drückt dann auf "Datei auswählen" um das Design hochzuladen, drückt auf speichern und schließen.

Erster Schritt:

Geht nun wieder auf die Vorlage und klickt auf HTML bearbeiten. Nun öffnet sich ein Fenster, in dem euer gesamter Code zusehen ist. Wichtig ist für uns nun diese Stelle body {

Wir möchten jetzt die Hintergrundfarbe des gesamten Designs ändern, um dies zu tun ersetzt Ihr die Zeile mit background:$bgcolor; durch diese Zeile: background:#f0f0f0;

Wenn Ihr das gemacht habt, geht auf Vorlage Speichern und drückt dann auf Vorschau, nun müsste euer Blog hell grau sein.

Zweiter Schritt:

Sucht nun nach der Stelle /* Outer-Wrapper, nun versuchen wir den Post Bereich und die Sidebar weiß zu bekommen, wie es zum Beispiel auch auf meinem Blog ist.

Fügt nun unter #main-wrapper { das hier ein: background:#FFFFFF;

Wichtig ist immer, das Ihr alle Zeichen mitkopiert, sonst funktioniert es nicht. Das gleiche macht Ihr auch bei #sidebar-wrapper { 

Wenn Ihr das gemacht habt, geht wieder auf Speichern und dann auf Vorschau, Euer Postbereich und Eure Sidebar müsste nun weiß hinterlegt sein!

Dritter Schritt:

Nun ist euch bestimmt aufgefallen, das die Sidebar sehr weit von den Posts entfernt ist, um das zu ändern müsst Ihr folgendes tun - Verändert die Anzahl der Größen bei widh:

Für #outer-wrapper { kommt width:995px;
Für #main-wrapper { kommt width: 700px;
Für #sidebar-wrapper { kommt width: 260px;

(Edit von Mira: Alle Werte könnt ihr so ändern wie ihr wollt, dabei sollte die Width von #main-wrapper und von #sidebar-wrapper niemals größer sein als die Width von #outer-wrapper!)

Vierter Schritt:

Die Sidebar ist nun etwas nach unten gerutscht, um das zu ändern schaut Ihr nochmal bei #main-wrapper { nach, dort steht das hier: margin:0 20px; löscht nur diese Zeile!

Jetzt müsstet Ihr einen grauen Hintergrund haben, einen weißen Postbereich, eine weiße Sidebar und eine Lücke zwischen dem Post Bereich und der Sidebar. SPEICHERN!

Fünfter Schritt:

Dies ist der letzte Schritt des Tutorials, er ist eher etwas für die "Perfektion des Designs" zuständig. Ihr müsst euch nun noch mal die drei Wrapper Päckchen anschauen und etwas zu jedem hinzufügen:

Zu #outer-wrapper { kommt noch padding:10px;
Zu #main-wrapper { kommt noch padding: 10px;
Zu #sidebar-wrapper { kommt noch padding: 5px;

Speichert nun euer Design nochmals ab und schaut es euch an, die Abstand sollte nun kleiner sein und insgesamt wirkt das Design jetzt noch etwas hübscher. Ich hoffe das Tutorial war verständlich, es hat echt eine Menge Zeit in Anspruch genommen dies zu verfassen.

Edit von Mira:

• Sidebar nicht am richtigen Platz? Falls eure Sidebar nicht auf der Höhe vom Postingbereich liegt, verkleinert die Werte unter Schritt 3!
• Rahmen um den Bildern entfernen? Wende dieses Tutorial (der B-Teil) an: Rand und Schatten entfernen
• Navbar & Attribution lassen sich nicht verschieben? Sucht im HTML jeweils nach Attribution und Navbar, bis ihr diese Stelle findet (siehe unteres Bild). Ändert in beiden Zeilen jeweils das locked='true' zu locked='false' um, danach speichern. Jetzt könnt ihr die Widgets unter Layout verschieben, bearbeiten und löschen.

• Alle Tutorials auf CPL sind auf diese Vorlage anwendbar! Gebt im Suchfeld Posttitel, Sidebar oder Datum ein, um zu mehr Tutorials zu gelangen!

29.12.12 // letztes Update von Mira