Eine kurze Einführung zur CSS (Joomla)
Änderungen am Aussehen eurer Webseite
Oftmals besteht der Wunsch, seine Webseite nach eigenen Vorstellungen zu ändern. Dabei wird entweder ein Template heruntergeladen oder eines der mitgelieferten Standardtemplates wird genutzt. Schaut man sich das Templateverzeichnis einmal genauer an, findet man dort eine Datei namens index.php und im Verzeichnis css die Datei template.css. Um diese beiden Dateien soll es hier gehen.
Doch kurz eine Erklärung zu CSS – Cascading Style Sheets. Viele wissen zwar, dass in den CSS-Dateien das Aussehen und der Aufbau der Webseite hinterlegt sind, was CSS aber eigentlich so interessant macht, dafür steht das C in CSS.
Das C steht für stufenförmig oder auch hintereinander geschachtelt. Oder um es treffender zu sagen: "Wer zuletzt kommt, malt zuletzt." Ja richtig, der letzte Eintrag überschreibt einen vorhergehenden Eintrag.
Ein kurzes Beispiel dazu:
Inhalt der template.css
...
p {
color: blue;
}
p {
color: red;
}
...
Inhalt der index.php
...
<link rel="stylesheet" href="/template.css" type="text/css" />
...
<body>
<p>
Hallo Welt!
</p>
</body>
...
Der Absatz wird nun nicht in einer blauen sondern in einer roten Schriftfarbe erscheinen.
Diese Logik trifft auch auf die CSS-Dateien selber zu. Die CSS-Datei, welche zuletzt geladen wird und in der die Styleanweisungen identisch zur vorher geladenen CSS-Datei sind, überschreibt diese.
Auch hier wieder ein Beispiel dazu:
Inhalt der template.css
...
p {
color: blue;
}
...
Inhalt der individual.css
...
p {
color: red;
}
...
Inhalt der index.php
...
<link rel="stylesheet" href="/template.css" type="text/css" />
<link rel="stylesheet" href="/individual.css" type="text/css" />
...
<body>
<p>
Hallo Welt!
</p>
</body>
...
Auch hier wird der Absatz in einer roten Schriftfarbe dargestellt.
Nun noch ein letztes Beispiel. CSS-Dateien selber lassen sich ebenfalls dazu nutzen, um weitere CSS-Dateien zu laden.
Das Beispiel dazu:
Inhalt der template.css
...
@import url(standard.css);
@import url(individual.css);
...
Inhalt der standard.css
...
p {
color: blue;
}
...
Inhalt der individual.css
...
p {
color: red;
}
...
Inhalt der index.php
...
<link rel="stylesheet" href="/template.css" type="text/css" />
...
<body>
<p>
Hallo Welt!
</p>
</body>
...
Der Absatz wird in einer roten Schriftfarbe dargestellt.
Was genau heißt das jetzt für euch? Ihr könnt mit diesem Wissen eure Änderungen an den CSS-Dateien besser nachvollziehen und müsst bei einem Update nur immer ein oder zwei Zeilen wieder ergänzen.
Meine Empfehlung wäre, in die index.php folgende Zeile als letztes im Header einzufügen.
Inhalt der index.php
...
<link rel="stylesheet" href="/individual.css" type="text/css" />
</head>
...
Inhalt der individual.css
...
/* Werte der template.css überschreiben */
@import url(individual_template.css);
/* Werte der galerie.css überschreiben */
@import url(individual_galerie.css);
/* Werte der forum.css überschreiben */
@import url(individual_forum.css);
...
Also Änderungen bitte demnächst nicht mehr direkt in den Originaldateien vornehmen, sondern schenkt dem C etwas mehr Bedeutung und überschreibt einfach ungewünschte Styleanweisungen.
Das erleichtert die Arbeit ungemein, da eure Änderungen bei einem Update des Templates und damit der template.css nicht verloren gehen und ihr immer wisst, was ihr geändert habt und diese Änderung auch leichter wieder rückgängig machen könnt.
Auf genaue Pfadangaben wurde hier der Einfachheit verzichtet.
Bei Fragen wendet euch einfach hier an das Forum.
Grüße S.