Minima Tutorials, Tipps & Tutorials, tutorial

CSS-Bezeichnungen im Minima Template

Hallo ihr Lieben, 

Heute erkläre ich euch, was die einzelnen CSS-Bezeichnungen, die ihr beim „Layout gestalten“ seht genau bedeuten.

Welche Eigenschaften ihr in die jeweiligen Bezeichnungen (der korrekte Fachausdruck ist Selektor) verwenden könnt, seht ihr im CSS-Katalog.

Wenn ihr unter „Vorlage“ und „HTML bearbeiten“ euer Design verändern wollt, stößt man vorerst auf Begriffe, von denen man gar nicht genau weiß, was sie bedeuten. Natürlich kann man vieles übersetzen, jedoch bleibt oft die Frage „Was verändere ich damit denn eigentlich?“ im Kopf hängen. Um in Zukunft Bescheid zu wissen, zeige ich euch eine Definitionsliste, die ich nach persönlichen „Try & Fail“-Erfahrungen erstellt habe.

Die Selektoren sind aus der Minima-Vorlage entnommen, mit der die meisten Blog-Designer arbeiten. Die Vorlage ist nicht mehr direkt bei Blogger verfügbar, aber ihr könnt die Original-Version hier oder unsere bearbeitete Version hier herunterladen. Beachtet, dass ihr bei dieser Vorlage den Vorlagendesigner nicht mehr verwenden könnt!

Links seht ihr die Begriffe bzw. Selektoren, die ihr in eurer Minima-Vorlage findet und rechts die passenden Definitionen.

 

body {}
Grundlegende Eigenschaften des Blogs
a:link {}
Eigenschaften der Links
a:visited {}
Eigenschaften der bereits besuchten Links
a:hover {}
Eigenschaften der Links, wenn man mit der Maus darüberfährt
a img {}
Eigenschaften der Bilder, die sich im Blog befinden und eine Verlinkung aufweisen

 

/* Header
———————————————–*/
/* Oberer Teil
———————————————–*/
#header-wrapper {}
Eigenschaften des Header-Bereichs
#header-inner {}
Eigenschaften für die Dinge, die sich im Header befinden
#header {}
Grundlegende Eigenschaften des Headers
#header h1 {}
Eigenschaften für Blogtitel im Header
#header a {}
Eigenschaften aller Links im Header (inkl. Blogtitel)
#header a:hover {}
Eigenschaften aller Links im Header (inkl. Blogtitel), wenn man mit der Maus darüberfährt
#header .description {}
Eigenschaften für die Blogbeschreibung unter dem Header
#header img {}
Eigenschaften für das Headerbild

 

/* Outer-Wrapper
———————————————– */
/* Hauptteil
———————————————– */
#outer-wrapper {}
Eigenschaften für den Gesamten Bereich (Sidebar+Haupbereich)
#main-wrapper {}
Eigenschaften für den Hauptbereich (Postbereich)
#sidebar-wrapper {}
Eigenschaften für den Sidebar-Bereich

 

/* Headings
———————————————– */
/* Überschriften
———————————————– */
h2 {}
Eigenschaften für Sidebartitel, Datum und “Überschrift” im Postbereich

 

/* Posts
———————————————–*/
/* Postbereich
———————————————–*/
h2.date-header {}
Eigenschaften für das Datum
.post {}
Eigenschaften für den Postbereich
.post h3 {}
Eigenschaften für Posttitel & Seitentitel auf der Startseite und (vor allem) auf der Postseite/Seite
.post h3 a, .post h3 a:visited, .post h3 strong {}
Eigenschaften für den Posttitel auf der Startseite
.post h3 strong, .post h3 a:hover {}
Eigenschaften für den Posttitel auf der Startseite, wenn man mit der Maus darüber fährt
.post-body {}
Eigenschaften für den einzelnen Postbereich
.post-body blockquote {}
Eigenschaften für Zitate
.post-footer {}
Eigenschaften für den unteren Teil des Posts
.comment-link {}
Eigenschaften für den Link zu den Kommentaren
.post img, table.tr-caption-container {}
Eigenschaften für die Bilder im Postbereich
.tr-caption-container img {}
Keine Angabe*
.post blockquote {}
Eigenschaften für die Zitate
.post blockquote p {}
Eigenschaften für Absätze in den Zitaten

 

/* Comments
———————————————– */
/* Kommentare
———————————————– */
#comments h4 {}
Eigenschaften für die Überschrift oberhalb des Kommentarbereichs
#comments-block {}
veraltet – keine Funktion**
#comments-block .comment-author {}
veraltet – keine Funktion**
#comments-block .comment-body {}
veraltet – keine Funktion**
#comments-block .comment-footer {}
veraltet – keine Funktion**
#comments-block .comment-body p {}
veraltet – keine Funktion**
.deleted-comment {}
Eigenschaften der gelöschten, sichtbaren Kommentaren
.feed-links {}
Keine Angabe*
#blog-pager-newer-link {
Eigenschaften für den Link “Neuere Posts” am Ende des Blogs
#blog-pager-older-link {}
Eigenschaften für den Link “Ältere Posts” am Ende des Blogs
#blog-pager {}
Eigenschaften für den Link “Startseite” am Ende des Blogs

 

/* Sidebar Content
———————————————– */
/* Sidebar
———————————————– */
.sidebar {}
Grundlegende Eigenschaften für die Sidebar
.sidebar ul {}
Eigenschaften für alle ungeordneten Listen der Sidebar
.sidebar li {}
Eigenschaften für alle Punkte in den Listen der Sidebar
.sidebar .widget. .main .widget {}
Eigenschaften für alle Gadgets in der Sidebar und im Postbereich
.main .Blog {}
Eigenschaften für den Postbereich

 

/* Profile
———————————————– */
/* Profilgadget
———————————————– */
.profile-img {}
Eigenschaften für das Bild im Profilgadget
.profile-data {}
Eigenschaften für die Überschrift im Profilgadget
.profile-datablock {}
Eigenschaften für die Überschrift im Profilgadget
.profile-textblock {}
Eigenschaften für den Text im Profilgadget
.profile-link { }
Eigenschaften für die Links im Profilgadget

 

/* Footer
———————————————– */
/* Unterer Teil des Blogs
———————————————– */
#footer {}
Eigenschaften für den unteren Teil des Blogs

Zum Schluss ein kleiner Hinweis: Wenn ihr eine Minima-Vorlage verwendet findet ihr alle Begriffe. Benutzt ihr eine neue Vorlage, werdet ihr diese wahrscheinlich nicht alle so vorfinden, wie sie hier aufgelistet sind. Trotzdem dürfte die Liste eine hilfreiche und nützliche Sache beim Designen eures Blogs sein.

*Keine Angabe: bedeutet, dass ich für diesen Begriff keine Funktion herausgefunden habe. Wenn ihr mehr wisst, dürft ihr die Liste gerne ergänzen.

**veraltet – keine Funktion: bedeutet, dass diese Selektoren vermutlich nicht mehr gebraucht werden und wenn, dann sehr selten.

17 Comments

  1. Bernhard Prange

    21. February 2013 at 8:20

    Also ich kann da ja sehr die Seite http://de.selfhtml.org/ empfehlen. Meiner Meinung nach die beste Seite was CSS / HTML angeht im Netz.

  2. Anja

    21. February 2013 at 8:39

    Das ist mal klasse! Sowas hat in eurer Sammlung bisjetzt gefehlt 🙂
    Liebe Grüße

  3. Anonym

    21. February 2013 at 8:45

    Danke für die tolle Zusammenfassung! ♥

    GLG Louise

  4. ♥ M i s s C o c o G l a m ♥

    21. February 2013 at 10:14

    Wow, super geniale Zusammenstellung =)!

  5. Katjas Testblog

    21. February 2013 at 11:15

    Sehr hilfreich, werd ich gleich mal ausprobieren. Es ist für einen Laien garnicht so leicht einen Blog zu designen. Vielen Dank!!!

    Liebe Grüße, Katja

  6. L E Y

    21. February 2013 at 15:21

    Toll, dass das mal so von grundauf geklärt wird, sonst fehlt einem immer dieses Wissen, obwohl man es dann doch irgendwie dann hinwurschtelt 😀 Riesiges Dankeschön an dich also!
    Liebste Grüße,
    L E Y

  7. Elske

    21. February 2013 at 17:01

    Auf so eine tolle Zusammenfassung habe ich schon lange gewartet
    – tausend Dank dafür liebe Hanna!!

    ♥♥

  8. Isabella J.

    21. February 2013 at 18:32

    Danke für diesen Post, Hanna! (:

  9. Mrs. Mohntag

    22. February 2013 at 20:50

    Vielen Dank! Nach so einer Zusammenfassung habe ich schon lange gesucht :-*

  10. Julia

    23. February 2013 at 10:34

    Hey , ich und mein Freund bieten jetzt etwas neues auf unseren Blogs an 😉
    Schau doch mal vorbei 😉
    Würde mich freuen wenn du mit machen würdest:

    http://momentoftime11.blogspot.de/2013/02/best-of-blog-febuar.html

    xoxo Julia

  11. Bella Berlin

    23. February 2013 at 14:10

    expecting-the-perfect.blogspot.de

  12. Anonym

    15. March 2013 at 21:55

    .sidebar ul
    –> definiert eine "unsortierte Liste" in der Sidebar näher

    .sidebar li
    –> definierte die "List Items" – die Unterpunkte der "unsortierten Liste" – näher

  13. Anne

    28. June 2013 at 8:39

    Ich danke für diese Zusammenfassung. Hatte an sich völlig davor den Überblick verloren :7

  14. iivorybeauty

    28. August 2015 at 7:38

    Eine super Hilfe 🙂

    Liebe Grüße ♥
    iivorybeauty

  15. Sandra Pusteblume

    28. August 2015 at 10:05

    Tolles Ding, Mira! Ich hab schon ein paarmal aus Jux versucht, ein bisschen mit Minima zu experimentieren. Ich hatte allerdings immer (!) das Problem, dass bestimmte Tutorials bzw. Codes in der Vorlage einfach nicht funktioniert haben (in den aktuellen bloggereigenen Vorlagen schon). :/

    Alles Liebe,
    Sandra

  16. Kekskultur

    28. August 2015 at 14:37

    Und wenn ich mein Menp gestalten möchte? Ich würde gerne eine Schleife oder ein Band dahinter legen..Lucy💗

Leave a Reply