Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03479.jsonl.gz/1060

Wer ein Theme für Concrete5 erstellt hat, wird sich eventuell gefragt haben, wofür die zwei CSS Dateien main.css and typography.css. In diesem Tutorial zeige ich ein paar Möglichkeiten, die Concrete5 im Zusammenhang mit CSS bietet. Grundlegende Kenntnisse über das Erstellen von Themes sollten vorhanden sein, ansonsten wäre es hilfreich dieses Tutorial vorgängig zu lesen: http://www.codeblog.ch/2009/01/concrete5-theme-erstellen/
Voraussetzungen
Ich habe aus Gründen der Übersichtlichkeit ein paar Elements entfernt!
Das Seiten-Layout
Die Testseite mit dem leicht modifizierten Theme sieht folgendermassen aus:
Die Farben der beiden Überschriften wurden von mir angepasst, sie sind nicht Teil des Standard-Themes.
Wird diese Seite nun bearbeitet, so sieht man folgendes:
Die Überschriften H1 und H2 sind schwarz. Wäre es nicht praktisch, wenn die Schrift-Elemente gleich formatiert wären? Dazu gibt es typography.css. Wir fügen ein paar Zeilen ein:
1 2 3 4 5
.File { background:transparent url(images/file.gif) no-repeat scroll 5px 7px; display:block; padding-left:16px; }
Der WYSIWYG Editor sucht standardmässig eine Datei mit dem namen typography.css and integriert sie ebenfalls. Damit kann man dem Benutzer bereits beim Eingeben einen erste Eindruck vermitteln, wie der Text später aussehen wird.
Nachdem die zusätzlichen Angaben eingefügt wurden, sieht unser Editor folgendermassen aus:
Sollten die Änderungen nicht sofort sichtbar sein, muss ev. der Cache zuerst gelöscht werden! Wichtig ist auch, dass typography.css direkt im Theme Ordner zu finden ist und nicht in einem Unterverzeichnis! Zum Beispiel: /themes/codeblog/typography.css und nicht /themes/codeblog/css/typography.css!