Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

Wie designe ich ein Layout? PART I (Grundlegendes)

Ich möchte euch heute zeugen wie man sich Layout's zusammenbastelt wie zum Beispiel die folgenden beiden (Beide Designs von mir.)
via 'Don't Regret'


HINWEIS: Dieses Tutorial wird etwas länger und theoretisch nur eine Ansammlung von verschiedenen Tutorials.

Schritt 1

Dieses Tutorial ist für die alten Vorlagen. Daher müsst ihr als erstes eine davon auf euren Blog laden.
Dazu geht ihr auf das alte Design (Sorry, ich hab noch nicht herausgefunden wo man es im neuem findet.).

Nun scrollt ihr auf der Seite bis ganz nach unten bis ihr zu dieser Stelle kommt.

Dort wählt ihr euch dann die aus, die euch am meisten gefällt. Ich empfehle die Minima oder die Minima Lefty. (Unterschied zwischen
 den beiden ist nur die Seite auf der die Sidebar ist)


Nun dürfte euer Blog in etwa so aussehen.


Schritt 2


Nun geht ihr in den HTML-Text eures Blogs.
Dort sucht ihr jetzt nach
outer-wrapper
So dass ihr zu folgender Stelle gelangt.
 
  
Diese 3 Stellen bezeichnen  die Breiten des Blogs. Ihr müsst hier die Pixel-Zahlen nach dem Width anpassen. Je höher die Zahl um so
breiter dieser Bereich.

Main-Wrapper: Gibt die Breite des Post-Bereiches an. (Kleiner Tipp für Photo-Blogs. Wenn ihr eure Photos in X-Large postet sind
sie immer 640px breit. Also bietet es sich an den Postbereich auch in etwa in dieser Breite zu gestalten.)
 Sidebar-Wrapper: Gibt die Breite der Sidebar an. Wenn ihr keine Sidebar haben wollt gebt ihr einfach 0px an.
Outer-Wrapper: dieser Bereich definiert den Gesamten Blog. Ist die Zahl nach dem Width bei Outer-Wrapper kleiner als die
Main-Wrapper + Sidebar-Wrapper Zahl zusammen ist die Sidebar nach unten verrutscht und wird nicht mehr angezeigt dort wo sie
sein sollte. Vergrößert in dem Fall einfach die Outer-Wrapper Width-Zahl.

Experimentiert mit den Zahlen einfach herum. Ihr werdet die richtigen schon finden!

Wenn die Outer-Wrapper Width-Zahl zu niedrig ist und die Sidebar nicht mit einberechnet ist sieht das in etwa so aus. Als ob es keine
Sidebar geben würde.
Wenn ihr alle Breiten zufriedenstellend hinbekommen habt dann kommt Schritt 3.

Schritt 3

Als nächstes passt ihr mit dem Vorlagendesigner die Vorlage auf eure persönlichen Wünsche zu.
Sucht euch eine Hintergrundfarbe aus und stellt sie ein. Das ganze wird dann in etwa so aussehen, aber das ist nicht schlimm. Das muss
so sein.
Schritt 4

 Um nun den Post-Bereich weiß zu bekommen gibt es 2 Möglichkeiten. Entweder die, dass ihr den gesamten Postbereich weiß macht (erstes Bild) oder nur die einzelnen Posts (zweites Bild)


Ihr müsst 
background: #fff;
entweder bei #main wrapper (für die erste Variante) einfügen.


(dass es so aussieht:
#main-wrapper {
  width: 680px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  background: fff;
}

)

Oder bei .post für die 2. Variante
(
.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;

padding-bottom: 1.3em;
 background: #fff;

}
)


Damit das ganze nicht so an den Rand gedrängt ist ersetzt ihr padding-bottom: 1.3em;  durch
padding: 10px;
Natürlich könnt ihr die Pixelzahl wieder beliebig anpassen.
Für die Sidebar funktioniert das ganze genauso nur, dass ihr alles bei 
.sidebar
einfügt.

Schritt 4 

Das Grundgerüst des Layout's steht jetzt. Nun kommen die Feinheiten. Wenn ihr wollt geht ruhig nocheinmal in den Vorlagendesigner und passt an was ihr wollt.

Jetzt müsst ihr überlegen: Was brauche ich und was nicht? Was will ich haben und was nicht?

Navigationsleiste da lassen, verstecken oder entfernen?

Verstecken

 http://www.copypastelove.org/2011/01/blogger-navigations-leiste-verstecken.html 

Entfernen
 Fügt dazu im Vorlagendesigner unter 'CSS hinzufügen' folgendes ein:
#navbar-iframe {
         height:0px;
         visibility:hidden;
         display:none
    }

Möchte ich den Header entfernen?
Fügt bei #header 
display: none; 
ein


Möchte ich den Header neben der Sidebar haben? (Siehe 2. Beispielbild ganz oben)

Entfernt den Header und ladet ihn als Bildgadget hoch, verlinkt euren Blog als URL auf die es führt und achtet darauf, dass er direkt über dem Postbereich liegt.


Möchte ich den Post-Titel noch mehr gestalten?


Scuht nach 
.post h3 {
Unterstreichen: border-bottom: 1px solid;  [Mehr zu dem Thema hier: http://time-to-steal-ideas.blogspot.de/2012/03/unterstreichen-mit-hilfe-von-html-css.html ]

Nur Großbuchstaben: text-transform: uppercase; 


Abstände zwischen den einzelnen Wörtern des Post-Titels: word-spacing: 3px; [Ihr könnt die Pixelanzahl wider beliebig verändern]

Abstände zwischen den einzelnen Buchstaben des Post-Titels: letter-spacing: 5px;
[Ihr könnt die Pixelanzahl wider beliebig verändern]

Mehr Möglichkeiten zum gestalten: hier: http://de.selfhtml.org/css/eigenschaften/schrift.htm


Möchte ich Datum und Post-Titel mittig haben? 

Bei .post h3 { bzw. h2.date-header { folgendes einfügen.
text-align: center;
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Bei Fragen ect fragt mich einfach über formspring.

♥, Charlotte             

Kommentare:

  1. dankeschöön♥ super tolle idee.
    :) aber irgendwie funktionierts mit dem postitel das der groß wird und centriert nicht :(

    AntwortenLöschen
  2. postitel und datumsheader kann ich nicht groß machen und in die mitte setzen

    AntwortenLöschen
  3. super Tutorial, danke! :) Hat alles funktioniert, bis auf das mit dem Header. Ich hab ihn entfernt und neu als Bild hochgeladen, aber er ist immer noch über der Sidebar, nicht daneben. :/ Und noch ne Frage, weißt du wie ich die Punkte am Ende vom Blog und zwischen den Widgets entfernen kann? Ich versuch das mit dem Layout grade in dem 'Testblog' der auf meinen Profil da steht :D.
    Liebe Grüße! <3

    AntwortenLöschen
  4. Ja, mein Problem mit den Punkten hat sich inzwischen erledigt, aber mein Header ist doch immernoch über der Sidebar? Oder sieht das bei dir anders aus? :D

    AntwortenLöschen
  5. Ich würde mich mal freuen wenn ihr dieses Tutorial auch für das neue Designe machen könntet.:)

    AntwortenLöschen
  6. Das -
    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom: 1.3em;
    background: #fff;
    }
    Also die 2. Variante mit dem Hintergrund

    funktioniert bei der Sidebar nicht. Ich habe das "background: #fff;" bei ".sidebar" eingefügt, aber es verändert sich nichts, es ist immer noch eine zusammenhängende Sidebar. Hab ich irgendwas falsch gemacht, also muss man das irgendwie anders einfügen oder liegt der Fehler woanders? Wär lieb, wenn du mir helfen könntest ♥
    :* Laurena

    AntwortenLöschen
    Antworten
    1. http://time-to-steal-ideas.blogspot.de/2012/06/wie-designe-ich-ein-layout-part-ii.html

      Löschen
  7. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  8. Vielen Vielen Dank, du hast mir echt sehr weitergeholfen! Ich war schon ganz verzweifelt.

    AntwortenLöschen
  9. Moin !
    ich habe den header links neben der sidebar als image widget eingefügt, weil ich es im Beispiel 2 so klasse fand :)
    nur leider sitzt mein Bild immer tiefer als bei eurem Beispiel ( http://www.twistedthoughts.de/)
    Welchen Trick gibt es, um es weiter nach oben zu bekommen ?
    Hab ich es falsch gemacht ?
    Hab schon alles Mögliche ausprobiert, komme leider aber nicht weiter....
    Könnt ihr mir helfen ?

    Liebe Grüsse aus hamburg!

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.