Oftmals taucht die Frage auf, wie man am Besten geänderte, oder eigene CSS ( Cascading Style Sheets CSS ... eine Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML eingesetzt und legt fest, wie Inhalte oder Bereiche dargestellt werden sollen. ) ( Cascading Style Sheets )bei Drupal ( Ein Open Source Content Management System ( CMS ) und Community Framework ) korrekt einsetzt. Dazu sollte man sich ein wenig mit dem grundsätzlichen Aufbau von Themes bei Drupal beschäftigt haben, um die Zusammenhänge zu verstehen. Informationen gibt es ausführlich bei Drupal.org, oder im Handbuchbereich von Drupalcenter.de.

Man kann CSS relativ einfach in den vorhandenen CSS Dateien des verwendeten Themes, oder in den CSS Dateien der CORE ( Der Drupal Core: der Kern - Mit Core werden bei Drupal System Themes und Module bezeichnet, die standardmäßig in einer Drupal Installation vorhanden sind. ) oder Zusatz Module ändern. Hier lauern allerdings einige Fehlerquellen, denn beim Einsatz und der Aktualisierung eines vorgefertigten Themes, sind alle Änderungen einfach weg. Das gleich gilt übrigens auch bei Änderungen in CSS Dateien die durch Drupal und das COLOR Modul erfolgt sind. Hier eine andere Farbe gewählt und die CSS Änderungen der entsprechenden Datei rauschen ins Daten-Nirvana.

Es geht aber auch richtig! Und zwar bietet Drupal 6 die Möglichkeit relativ einfach eigene CSS Dateien zu integrieren, die Update- oder Farbunabhängig dauerhaft ins Theme integriert werden können! Wie das geht erfahrt Ihr hier: Für das Beispiel nutze ich:

• das GARLAND Theme
• mit aktiviertem COLOR Modul
• geändert werden soll der Systemlink "weiterlesen"
• einen Texteditor
• Firefox Browser in Verbindung mit der Firebug Erweiterung

Letzters ist ein unverzichtbares Tool beim Theming!

Als erstes lege ich eine eigene Datei meincss.css im Theme Ordner von GARLAND unter .../themes/garland an.

Da ich erreichen möchte, daß sich der normale "weiterlesen Link" dauerhaft ändert und sich deutlicher im Text abheben soll, schreibe ich folgende CSS Anweisung in diese Datei:

.node_read_more a { font-weight: bold; color: red; }

Soweit so gut, aber noch weiss Drupal nicht, daß es diese neue CSS Datei überhaupt gibt! Deshalb bearbeite ich die Datei garland.info und teile darin sozusagen dem Theme mit, daß es eine neue Datei mit CSS Befehlen gibt, die zukünftig berücksichtigt werden soll.

Dazu füge ich folgende Anweisung unter der vorhandenen Zeile Nr.7 ( stylesheets[all][] = style.css ) ein:

stylesheets[all][] = meincss.css

Damit sollte die garland.info Datei nunmehr so aussehen:

Damit das GARLAND Theme diese Änderung auch bemerkt, sollte unter Leistung .../admin/settings/performance einmal der Cache geleert werden, damit sich das Theme neu aufbaut. Tja und das war dann schon alles.

Die Eigenschaften des "weiterlesen Link" bleiben geändert, auch wenn eine neue Farbe im Theme genutzt wird!
Hier ein Beispielbild für das Garland Theme mit Farbauswahl "Belgische Schokolade", mit den entsprechenden Informationen der Firebug Erweiterung des Firefox!

Hier ein Beispielbild für das Garland Theme mit Farbauswahl "Olivenöl"

Egal, welche Farbkombination man in einem Theme nutzt, oder ob das Theme upgedated wird. Mit dem Hinzufügen der Datei mein.css und einer Einbindung über stylesheets[all][] = meincss.css in die jeweilige .info Datei ist man immer auf der richtigen Seite!

Ein wichtiger Hinweis noch ... dies sollte natürlich nicht in einem der Drupal Core Themes durchgeführt werden! Bei einem Versions Update wären diese Änderungen dann nämlich verloren. Der richtige Weg ist, diese Änderungen bei einem eigenen Theme unter sites/all/themes/EIGENES_THEME durchzuführen! is kann beispielsweise eine Kopie eines Core Themes sein.

Das Ganze ist natürlich beliebig erweiterbar mit noch mehr CSS Dateien, z.B.: advancedforum.css usw. .... Viel Erfolg beim Nachbau und schreibt mir mal nen Kommentar, wenn das kleine Tutorial hilfreich war!