Headway CSS Map

Dieser Artikel bietet Hilfestellung zur richtigen Anwahl von Layouts, Elementen und Blöcken zur Gestaltung in WordPress und Headway HTML. Anhand dieser Selektoren lässt sich der CSS-Code der Seite im Live CSS Editor weiter anpassen. Die meisten Codeabschnitte werden mit body.custom eingeleitet (Erläuterung s. erster Abschnitt).

Body Klassen

„body“-Klassen umfassen die Klasse „custom“ und weitere Klassen, die sich auf spezifische Layouts beziehen. Diese Klassen müssen unmittelbar vor dem body-Selektor stehen (ohne Leerzeichen).

body.custom

In Ihrer WordPress-Headway-Seite beinhaltet der <body>-Tag unter anderem eine Klasse namens „custom“. Ohne das Headwaytheme bewirkt diese Klasse gar nichts. Sie ist in Headway integriert, damit Sie Ihren eigenen CSS-Code schreiben können, den Sie mit dem Selektor body.custom einleiten. Damit können Sie stets einen Überblick über Ihre eigenen Änderungen behalten. Das kann beim Troubleshooting mit Web-Development-Tools wie Firebug nützlich sein – auf diese Weise wissen Sie, welcher CSS-Code Ihrer ist und welcher zu Headway gehört.

Mit anderen Worten: Diese beiden Selektoren bewirken genau dasselbe:

	body.custom .boxshadow h1 
	.boxshadow h1

Der einzige Unterschied ist, das Sie bei der Version body.custom sich sicher sein können, dass Sie alle Attribute und Werte selbst eingefügt haben.

Anmerkung: In früheren Headway-Versionen vor 3.0 war das Einbetten eigenen CSS-Codes nur per body.custom möglich. Seit Version 3.0 dient die Klasse hauptsächlich zu Troubleshooting-Zwecken.

Die Home Seite

Klasse: home

Selektoren:

	body.custom.home
	body.home

Der Blog Index

Klasse: blog

Selectoren:

	body.custom.blog
	body.blog

Verwendete Layouts

Diese Klassen übernehmen bestehende Layouts zur Verwendung als Layout Vorlagen. Mit diesen Selektoren können Sie eine ganze Reihe an Unterlayouts anwählen, bzw. solche Layouts, die eine bestimmte Vorlage nutzen.

Klassen:

  • layout-using-index
    (für Layouts, die aus dem Blog-Index übernommen sind)
  • layout-using-single
    (für Child Layouts von Single)
  • layout-using-archive
  • (für Child Layouts vom Archiv)
  • layout-using-template-1
    (wobei 1 eine fortlaufende Zahl ist, die der Layoutvorlage zugewiesen ist. Diese Klasse nutzt keinen Slug (bereinigten Namen), der auf dem Namen der Vorlage basiert.)

Selektor Beispiele:

	body.custom.layout-using-index
	body.custom.layout-using-template-2
	body.layout-using-single

Beiträge (Artikel) und Seiten

Beitrags- und Seiten-IDs finden sich in Permalinks wieder (sofern die Nutzung von IDs eingestellt ist), sowie in der URL beim Bearbeiten eines Beitrages bzw. einer Seite in WordPress.

Klassen:

  • single
    (für ein einzelne Beiträge)
  • page
  • page-slug-my-slug
    (wobei my-slug der bereinigte Name bzw. Slug einer bestimmten Seite ist)
  • pageid-99
    (wobei 99 die ID der Seite darstellt)
  • layout-single-post-99
    (wobei 99 die ID des Beitrages darstellt)
  • layout-single-page-99
    (wobei 99 die ID der Seite darstellt)

Selektor Beispiele:

	body.custom.single
	body.custom.page-slug-about-me
	body.custom.pageid-10
	body.page
	body.layout-single-post-13

Beitrags Arten (Types)

Klassen:

  • post-type-post
  • post-type-page
    (hat den selben Effekt wie der Selektor für die Klasse „page“)
  • post-type-my-slug
    (für angepasste Post-Typen, wobei my-slug der Slug des angepassten Typs ist)

Selektor Beispiele:

	body.custom.post-type-post
	body.custom.post-type-product-demos
	body.post-type-page

Kategorien Archive

Klassen:

  • category
    (für alle Kategorien Archiv-Seiten)
  • category-my-slug
    (wo my-slug der Slug der Kategorie ist)
  • s-category-my-slug
    (wobei my-slug der Slug der Kategorie ist; hiermit werden einzelne Beiträge in der angegebenen Kategorie ausgewählt)

Selektor Beispiele:

	body.custom.category
	body.custom.category-tuesday-talk
	body.s-category-thursday-thoughts

Autor Archive

Klassen:

  • author
    (für alle Autoren Archiv-Seiten)
  • author-username
    (wobei username der unveränderbare Benutzername des Autors ist)
  • s-author-username
    (wobei username der unveränderbare Benutzername des Autors ist; hiermit werden einzelne Beiträge des angegebenen Autors ausgewählt)

Selektoren:

	body.custom.author
	body.custom.author-admin
	body.s-author-jdoe

Whitewrap

Das Element direkt hinter dem body-Element ist ein div, das alles Weitere umfasst. Es trägt die ID (nicht Klasse) „whitewrap“. Das es alles Weitere auf der Webseite umfasst, entspricht die Seitenhöhe, stets der Höhe der gesamten Seite.

Eine Einsatzmöglichkeit von #whitewrap besteht darin, zusätzlich zum Hintergrundbild oben auf der Seite auch unten eines hinzuzufügen. Um diesen Effekt zu erzielen, fügt man ein Hintergrundbild am Anfang des body-Element und eines am Ende des #whitewrap-Elements hinzu.

	body.custom { background: url('images/bgtop.png') repeat-x top left; }
	body.custom #whitewrap { background: url('images/bgbottom.png') repeat-x bottom left; }

Wrapper

Innerhalb von #whitewrap findet sich ein div der Klasse „wrapper“, das den Rest der Seite enthält. Die in Headway Base voreingestellten Ränder von .wrapper sind:

	30px auto;

Einstellungen von 30px auf 0px setzen, entfernt die Ränder am Seitenanfang und -ende.

Möchten Sie Ihre Seite in #whitewrap vom linken Rand einrücken, anstatt sie horizontal mittig zu setzen, fügen Sie diesen Code im Live CSS Editor ein:

	body.custom .wrapper { margin: 0; }

Abschnitte (Sections)

Headway-Seiten nutzen das „section“-Element aus HTML5 mit zwei Klassen: „row“ (Zeilen) und „column“ (Spalten). Zeilen enthalten Spalten, die wiederum Blöcke enthalten. Wenn man im Grid-Modus Blöcke anordnet, interpretiert Headway das Layout in Zeilen und Spalten. Mit folgenden Selektoren können Zeilen und Spalten allgemein angewählt werden:

	body.custom .row 
	body.custom .column

Die Spaltenabschnitte haben zusätzliche Klassen, die sich auf die Anordnung, Lage und Breite beziehen:

  • column-1
    (wobei 1 für eine fortlaufende Nummerierung steht, die auf der linken Seite beginnt)
  • grid-left-3
    (wobei 3 die Anzahl der Grid-Modus-Spalten von der linken Seite des Grids aus darstellt, wo der Abschnitt beginnt; gültige Werte sind 0-23)
  • grid-width-10
    (wobei 10 für die Anzahl an Grid-Modus-Spalten steht, welche dieser Abschnitt umfasst)

So können Sie z.B. ein bestimmtes Hintergrundbild für alle Blöcke in der zweiten Spalte hinzufügen:

	body.custom .column-2 { background: url('images/gradient.png') repeat-x top left; }

Blöcke und Block Inhalte

Blöcke können entweder 1) allgemein, 2) nach ID und 3) nach Typ gestaltet werden.

Allgemein

Verwenden Sie die Klasse „block“, um allen Blöcken einen bestimmten Gestaltungsstil zuzuweisen, z.B.:

	body.custom .block { border: 1px solid #ccc; }

Um Inhalte in Blöcken auszuwählen, nutzen Sie die Klasse „block-content“. Manchmal bietet sich dies eher an als .block. Möchten Sie z.B. einen größeren weißen Rand um Ihren Inhalt haben, fügen Sie ihn mit .block-content anstatt .block zu, um nicht die Größe des Blocks selbst zu beeinflussen und damit womöglich Ihr Layout zu ruinieren.

	body.custom .block .block-content { padding: 10px; }

Wichtig: Wenn Sie LoopBuddy nutzen, verwenden Sie nicht .block-content. Bitte lesen Sie zur Verwendung von content in der Anleitung von LoopBuddy zum Thema CSS-Klassen nach.

Typ

Jeder Block-Typ hat eine entsprechende Klasse, die zur leichteren Einprägsamkeit ein Slug ist, vor dem „block-type-“ steht.

  • Kopfzeile (Header): block-type-header
  • Navigation: block-type-navigation
  • Inhalt (Content): block-type-content
  • Fußzeile (Footer): block-type-footer
  • Navigationspfade (Breadcrumbs): block-type-breadcrumbs
  • Angepaßter (Custom) Code: block-type-custom-code
  • Widget Bereich: block-type-widget-area
  • Text: block-type-text
  • Slider: block-type-slider
  • Eingebettet (Embed): block-type-embed

ID

Die ID eines Blocks wird in seiner linken oberen Ecke angezeigt, wenn Sie mit der Maus darüberfahren. CSS-Code nach Block-ID anzupassen, wird nicht empfohlen, da Ihr CSS sonst schnell sehr unhandlich wird. Zudem gibt der Blick in den Code auch nur wenig Aufschluss darüber, warum nun ausgerechnet Block 7 einen schwarzen Hintergrund und weiße Schrift haben sollte. Besser ist es, im Live CSS Editor custom-Klassen hinzuzufügen und dann diesen Klassen die Blockoptionen zuzuweisen.

Es mag dennoch vorkommen, dass Sie einen Block aus bestimmten Gründen nach seiner ID anwählen wollen. Nutzen Sie hierfür folgende ID (nicht Klasse):

#block- 99
(wobei 99 die ID des Blocks ist)

Weitere Gestaltung von Inhalten

Verwenden Sie diese Klassen, um innerhalb von content-Blöcken weitere Elemente zur Gestaltung auszuwählen.

Struktur

Beachten Sie diesen HTML-Beispielcode auf snipplr. Jedes dieser Elemente bzw. jede dieser Klassen in diesem Code können angewählt werden.

Beiträge und seiten titel

Hiermit lassen sich Titel von einzelnen Beiträgen auswählen:

	body.custom .entry-title 
	body.custom h1.entrytitle

Hiermit lassen sich auf anderen Seiten (z.B. Blog-Index und Archiv) Titel auswählen, die sich auf einzelne Beiträge beziehen:

	body.custom .entry-title a { }
	body.custom h2.entry-title a { }

Wie Sie Beitrags- und Seitentitel verbergen können, erfahren Sie unter „Anzeige“ in Inhalts-Block-Optionen.

beitrags Meta Daten

Alle Metadaten stehen unter der Klasse „entry-meta“ und einer zusätzlichen Klasse, die von Ort und Art der Metadaten abhängig ist.

  • entry-meta-above
    (div-Klasse für Daten zwischen title und body)
  • entry-utility-below
    (div-Klasse für Daten unter body)
  • entry-date
    (span-Klasse, die sich nur auf das Datum bezieht, nicht auf den Text „Veröffentlicht am“)
  • published
    (span-Klasse, die sich nur auf das Datum bezieht, nicht auf den Text „Veröffentlicht am“)
  • author-link
    (link-Klasse, die sich auf den Namen des Autors des Beitrages bezieht)
  • fn
    (link-Klasse, die sich auf den Namen des Autors eines Beitrages bezieht)
  • nickname
    (link-Klasse, die sich auf den Nick Namen des Autors eines Beitrages bezieht)
  • url
    (link-Klasse, die sich auf den Link eines Beitrages bezieht)
  • entry-comments
    (link-Klasse für die Anzahl der Kommentare)

Beispiele:

	body.custom .block-type-content div.entry-meta span.entry-date 
	body.custom .block-type-content div.entry-meta a.entry-comments

Beitrags Inhalt

WordPress verwendet bei Beiträgen verschiedene Klassen. Jeder Beitrag hat die Klasse „hentry“ sowie eventuell weitere:

  • Post ID: post-99
    (wobei 99 die Post-ID darstellt)
  • Custom post type: type-my-slug
    (wobei my-slug die Slug des angepassten Post-Typs ist)
  • Post status: status-publish; status-pending; status-draft; status-new; etc.
    (Mehr unter WordPress Codex für weitere Statuten)
  • Post format: format-standard; format-aside; etc.
    (Mehr unter WordPress Codex für weitere Formate)
  • Post category: category-my-slug
    (wobei my-slug der Slug der Kategorie ist)
  • Post author: author-username
    (wobei username der Benutzername des Autors ist)

Dieser Artikel wurde zuletzt für Headway Version 3.6.3 aktualisiert.

Letztes Update: 06. Mai 2014