Mambo: CSS-Datei zum Template

Aus Wikibooks

Wechseln zu: Navigation, Suche
← Templates selber erstellen Das Mambo-Buch:
Profi-Bereich - CSS-Datei zum Template		 Komponenten selber erstellen →
↑ Startseite Profi-Abschnitt ↑ Passendes Anfänger-Thema ↑ Startseite Schnelleinstieg


Cascading Style Sheets (CSS) ist eine Sprache für strukturierte Dokumente wie beispielsweise HTML und vereinfacht die Pflege aufwendiger Webseiten durch die Trennung von Layout und Inhalt. Dies wird auch bei Mambo angewendet, indem, außer der Struktur, alle Informationen zum Aussehen in der Datei "template_css.css" gespeichert werden.

Mittels CSS werden Schriften, Farben, Hintergründe, Tabellen, Grafiken, Rahmen, Abstände (innen und aussen) etc. festgelegt.

Inhaltsverzeichnis

[Bearbeiten] Kurz-Einführung CSS

Stylesheets bestehen aus Formaten, die Sie für bestimmte HTML-Elemente oder für eine bestimmte Auswahl von HTML-Elementen definieren. Zum Auswählen einer bestimmten Gruppe von HTML-Elementen, für die ein Format gelten soll, gibt es in CSS die Syntax der so genannten Selektoren.

Die Festlegung geschieht so, das dem Selektor, der die gewünschten Elemente selektiert (auswählt) der Wert zu einer bestimmten Eigenschaft zugewiesenen wird:

Selektor { Eigenschaft:Wert; }

Neben den Standard-HTML-Befehlen kann man auch Klassen (class) oder Individualformaten (id) festlegen.

Beispiel: table.moduletable th formatiert z. B. den Tabellenkopf(th) einer zuvor speziellen Tabelle (table).

table.moduletable th {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: Gray;
	text-align: left;
	width: 100%;
	height: 18px;
	border-bottom: 1px solid #CCCCCC;
	background: none;
}

[Bearbeiten] CSS-Kurse und -Informationen

Hier eine Sammlung von Links über CSS ... nicht nur für Anfänger!

Bietet einige Tutorials und eine ausführliche interaktive Referenz mit guter Suchfunktion auch zu CSS.
Neben einem Einführungskurs werden Beispiele und eine Referenz angeboten. Die zahlreichen Beispielen zu den einzelnen Themen bieten sogar die Möglichkeit selber den Code zu ändern und direkt die Veränderung zu sehen.
Link-Sammlung mit Informationen zu häufigen Problemen/Aufgaben.
Diverse Informationen und Anleitungen zu CSS.
Inhalte: url(), Eltern- und Kind-Elemente, Block-Elemente, Inline-Elemente, Positionierte Elemente
Das Select-O-Racle hilft beim Verstehen kompliziert aussehender CSS-Selektoren. Einfach im oberen Kasten eintragen und Knopf klicken.
Gibt anhand zahlreicher Beispiele einen Einblick, wie man mit einfachen Listen-Elementen hübsche Effekte erzielt. Kann zum Beispiel im Menü verwendet werden.
Schritt für Schritt wird eine Seite durch immer mehr CSS-Selektoren gestylt. Dadurch erkennt man sehr schön die Auswirkungen der einzelnen Befehle. Es werden Layout-Boxen, Hintegrund-Bilder und Rollover-Effekte verwendet.

[Bearbeiten] Hilfsmittel

Um sich das "Leben" mit CSS ein bisschen zu vereinfachen hier eine kleine Sammlung

  • Die Web Developer-Extension für Firefox und Mozilla bietet gute Hilfsmittel, um einen Überblick über die CSS-Styles einer Mambo-Site zu bekommen. Sie steht hier zum download bereit.
  • Top-Style Lite ist ein Windows-Programm zum Erstellen von StyleSheets mit Vorschau.

[Bearbeiten] CSS-Klassen in Mambo-Templates

Die Anzahl der in Mambo verwendeten CSS-Klassen ist recht groß. Daher nachfolgend eine Linksammlung mit ausführlichen Beispiel-CSS-Dateien:

Links:

[Bearbeiten] Klassen-Suffixe für Module, Menüs und Artikel

Festlegen von Klassen-Suffixe für ein Menü

Um Modulen mit einem eigenen Aussehen zu versehen, kann man auch die Eigenschaften zu speziellen Klassen festlegen. Einige Module (oder auch Komponenten) bieten eigene Einstellungsmöglichkeiten.

Es gibt aber auch die Möglichkeit zusätzlichen Einfluß auf die Templates zu haben, indem in der "template_css.css"-Datei eigene und vorhandene Klassen für Module, Menüs und Artikel verändert werden. Dazu gibt es das Module Class Suffix für die Module und Page Class Suffix für die Menüs und Artikel.

Im Backend:

  • Module Class Suffix: _MeinFormat

In der CSS-Datei: ...



← Templates selber erstellen Das Mambo-Buch:
Profi-Bereich - CSS-Datei zum Template		 Komponenten selber erstellen →
↑ Startseite Profi-Abschnitt ↑ Passendes Anfänger-Thema ↑ Startseite Schnelleinstieg
Von „http://de.wikibooks.org/wiki/Mambo:_CSS-Datei_zum_Template“
Persönliche Werkzeuge