Glückliche Kindheit mit CSS

In meinem Artikel “Mit Child Theme Design anpassen” schildere ich, wie man schnell und sauber mit einem Child Theme das Erscheinungsbild von WordPress anpassen kann, zum Beispiel für ein Corporate Design oder besondere Hervorhebungen. In dem Grundlagenartikel gibt es keine praktischen Beispiele — die Inspiration will ich hiermit nachholen. Gewisse Grundlagen, wie CSS grob funktioniert sollte man allerdings haben.

Ich stelle hier exemplarisch einige meiner Erweiterungen vor, um die ich unterschiedliche Themes gern ergänze und so bei der Entwicklung nicht ganz von vorn anfangen muß.


PDF-Dokument
.pdf
background:url(pdf_icon.png);
background-repeat:no-repeat;
padding-left:18px;
Dem Manuskript zur Makrofotografie wird automatisch ein PDF-Symbol vorangestellt.
Textmarker
.wichtig
background-color:lightgreen;
Ein einfacher Textmarker verwendet einfach nur einen farbigen Hintergrund, ähnelt technisch also dem Hinweis.
Textmarker
.marker
background:url(textmarker.png);
Mit einer Hintergrundgrafik kann man einen unregelmäßigen Textmarker anlegen, wobei sich der Strich durchaus anpaßt (bitte insb. auf die Höhe der Grafik achten).

Hinweis
.hinweis

border:gray dotted 5px;
padding:9px;

Der Hinweis peppt die einfache Einrückung von <blockquote> etwas auf, wobei manches Theme von Haus aus dafür bereits ein besonderes Aussehen definiert.

Notiz
.notiz
background:url(spiralblock.jpg);
background-repeat:repeat-y;
padding-left:55px;

Eine Notiz wird automatisch mit etwas Notizblockdesign ausgestattet, was natürlich nur bei mehrzeiligen Passagen wirkt und ebenfalls vorzugsweise für <blockquote> gedacht ist.

 

[Update]

Mit meinen beiden Beiträgen zum Child Theme möchte ich eigentlich nur technische Hintergrindinfo und Inspiration geben, wie man die Vorzüge eines CMS mit Individualisierung kombinieren kann — und keinen Programmierkursus… Trotzdem ein kleiner Hinweis zur praktischen Anwendung: Es kommt auf die sog. Selektoren an:

.hinweis {
border:gray dotted 5px;
padding:9px;
}

Wenn man (wie ich) Pseudo-Klassen verwendet (name mit einem Punkt davor) passiert auf der Website erstmal rein gar nichts. Man muß in den HTML-Code die gewünschten Elemente beispielsweise um das Attribut class="hinweis" ergänzen. Das hat den Vorteil, daß man es sehr flexibel einsetzen kann, sowohl für Einrückungen (“blockquote”) als auch Absätze (“p”) oder sogar einzelne Wörter (via “span” wie für die Textmarker notwendig).

Wer es (als Einsteiger) ganz einfach und vor allem ohne Änderungen im HTML-Code haben möchte, muß in der “styles”-Beschreibung ein Element direkt angeben (und ohne Punkt):

blockquote {
border:gray dotted 5px;
padding:9px;
}

Jetzt werden allerdings alle Einrückungen (technisch im HTML als <blockquote> makiert) sofort und ohne Ausnahme auf der gesamten Website gemäß der Style-Definition dargestellt. Dabei werden ggf. auch die grafischen Elemente wie beispielsweise das PDF-Icon automatisch eingebunden, sie werden nicht von Hand im Editor eingefügt!

Comments

comments

Leave a Reply

Your email address will not be published.