allgemeine Konventionen

• Einrückungen (in Templates und Stylesheets) mit 2 Leerzeichen (keine Tabs)
• Templates
  • Bei langen Bereichen in den Templates den End-Tag markieren. Beispiel:
    • <div class="classname">(mehrere Zeilen Zwischenraum)</div><!-- end classname -->
• Stylesheets
  • Schriftgrößenangaben in em
  • bei 0-Werten keine Einheit mit angeben (also 0 statt 0px)
  • keine Unterstriche in class/id-Namen
  • um irgendeinem Element Werte zuzuweisen immer die Klassen/Ids der übergeordneten Elemente mit angeben, um Namenskonflikte zu vermeiden. Beispiel:
    • #articlepage #articlemain #article .abstract .imageicon { ... } (statt nur .imageicon)

CSS: prinzipielle Reihenfolge der Properties

"a house building from outside to inside"

• display
• float and position
• width and height
• Specific element properties
• margin
• border
• padding
• background
• color
• font related properties

CSS-Struktur

CSS-Struktur: startpage

• body#startpage
  • div.hidden (accesskey-listen)
  • div#title
  • div#mainbody
    • div#right (enthaltene Elemente siehe weiter unten)
      • div.navbox(#publishbox) "Selbst Publizieren"
      • div.navbox(#eventspecialbox) "..."
      • div.navbox(#newswirebox) "Newswire"
      • div.navbox(#sidebarbox) "Sidebar"
    • div#middle
      • div#warningbox "Wartungsarbeiten..."
      • div#breakingnews
      • div.feature
        • div.article (Inhalt wie auf Archiveseiten)
      • div.article (Inhalt wie auf Archiveseiten)
      • div#footer
    • div#left (enthaltene Elemente siehe weiter unten)
      • div.navbox(#topicbox) "Themen"
      • div.navbox(#recentbox) "Aktuell"
      • div.navbox(#feedbox) "RSS-Feeds"
      • div.navbox(#searchbox) "Suche"
      • div.navbox(#archivebox) "Archive"
      • div.navbox(#stylesheetbox) "Stylesheet"
      • div.navbox(#upcomingbox)"Demnächst"
      • div.navbox(#linkbox) "Links"
      • div.navbox(#imcbox) "IMCs"

innerhalb von #right und #left:

• div.navbox
  • h2 (border links oder rechts) "Selbst Publizieren", "Newswire", "Sidebar", "Themen", "Aktuell", "Suche", "Archive", "Stylesheet", "Demnächst", "Links", "IMCs"
  • h3 (border links oder rechts) (benutzt für Datum im Newswire)
  • ul (border (links oder rechts) und oben)
    • li (border unten)
  • navboxcontent (border (links oder rechts) und oben und unten)

Die IDs der ganzen "navboxen" sollten in der Regel im Stylesheet nicht verwendet werden. Wenn es unbedingt nötig ist, könnten so beispielsweise den einzelnen Kästen unterschiedliche Farben zugeordnet werden (wie beim "alten" Layout).

CSS-Struktur: articlepage (auch für static-Seiten benutzt)

• body#articlepage
  • div#articlemain
    • div#article
      • div.modbox
      • div.infoline
        • span.author
        • span.date
        • span.topics
      • div.media
        • div.mediatype
          • div.mediaitem
      • div.abstract
        • div.imageicon
      • div.content
      • contact
        • email
        • website
      • div.moreimages
        • div.imageicon
          • div.imagedescription
      • div.licencenote
      • div.children
      • div.disclaimer
    • div#menu
      • a#logo
      • div#linkstartpage
      • div#linkback
      • div#linkfeature
      • div#linkprintpreview
    • div#comments
      • div#addcomment
      • div#goodcomments
        • div.comment
          • h3.title
          • div.infoline
            • span.author
            • span.date
          • div.media
            • div.mediatype
              • div.mediaitem
          • div.content
          • div.images
            • div.imageicon
              • div.imagedescription
      • div#badcomments
        • div.togglebadcomments
        • div.comment (und #c326326 = id des Comments, fuer Anchor beim Aufklappen)
        • (rest wie in #goodcomments)

CSS-Struktur: archivepage (für alle Archivseiten/Artikellisten)

• body#archivepage
  • div#archivemain
    • div#archivehead (<!--#include virtual="../archivehead.inc" -->)
      • a#logo
      • div#head
        • h1
        • ul
    • div#articlelist
      • div#archivename
        • h2
        • div.collapslink
          • a
            • span.xmlbutton
      • div.special
        • div.article (Child-Elemente siehe Definitionen bei div.article)
      • div.article
        • h3.title
          • a
        • div.infoline
          • span.autor
          • span.date
        • div.abstract
          • a
            • img.imageicon
        • div.clear
      • div#pageselector
        • div#pagemenu
        • div#current
          • a#previous
          • a#number
          • a#next
    • div#navigation
      • (<!--#include virtual="../navigation.inc" -->; Child-Elemente wie auf der Startseite)