Codelevel X logo
QR Barcode
Homex86-ProgrammierungProjekteTYPO3
Suche
>> HomeTYPO3 > CSS Anpassungen

TYPO3



TYPO3 CSS Stylesheet anpassen

CSS Styled Content

In der Lektion http://www.codelevelx.de/typo3-template.html wurde beschrieben, wie man CSS Styled Content aktiviert. Dabei werden alle Inhaltselemente einer Seite gerendert mit vordefinierten CSS Klassen. Diese Klassen braucht man in der Regel einfach nur in seine eigene CSS Datei übernehmen oder einzelne Elemente in der eigenen CSS Datei überschreiben und beide Dateien in die Seite linken.

Auf jeden Fall braucht man zunächst eine (eigene) CSS Datei, die in die Webseite übernommen wird. Um solche Zusatzdateien in TYPO3 zu verwalten und auch zu administrieren, bietet sich die Nutzung des Dateibereichs (Dateiliste) an.

(Dateiverwaltung in TYPO3)
(CSS Datei bearbeiten)

Im linken Menü im Backend kann man einen Dateimanager für zusätzliche Ressourcen wie Bilder, CSS Dateien, Javascript Dateien usw. für die zu gestaltende Webseite benutzen. Dabei wird auf den Grundordner fileadmin verzweigt und darunter lassen sich beliebige Strukturen in Form von Verzeichnissen und Dateien aufbauen. Alternativ kann man die Verzeichnisse auch auf dem Webserver im fileadmin Verzeichnis mit einem FTP Programm erstellen und auch damit Ressourcen hochladen. Aber auch der im Backend integrierte Dateimanager bietet sowohl eine Upload Funktion als auch einen integrierten Texteditor.

Zunächst wird der Ordner fileadmin ausgewählt durch Anklicken (linke Maustaste) und in der 3. Spalte des Backend sind oben 2 Symbole, eines für den Upload von Dateien, ein anderes zum Erstellen von Verzeichnissen oder Dateien. Zunächst wird das Verzeichnis css angelegt und dann in dieses Verzeichnis gewechselt durch Anklicken im Verzeichnisbaum (anstelle des Seitenbaums) und dann Datei neu ausgewählt und eine beliebige Datei (hier: codelevelx.css) wird angelegt und kann anschließend über das Kontextmenü Bearbeiten (rechte Maustaste) im integrierten Texteditor erstellt bzw. geändert werden.

TYPO3 CSS Definitionen

Durch das Aktivieren der CSS Styled Content als statisches Template wird eine Datei mit allen CSS Definition der TYPO3 Inhaltselemente automatisch in jede Seite integriert. Sofern man sich den Quelltext im Browser anzeigen läßt, kann man die CSS Datei öffnen und den Inhalt (ggf. nur die benötigten bzw. zu ändernden Stellen) kopieren. Im Quelltext findet man z.B. folgende CSS Anweisung im Header:

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_fad97d0aa7.css?1313441398" media="all">

Die eingefügten Zahlenkombination am Ende des Dateinamens mit dem ? ist dabei ein Sicherheitsfeature von TYPO3, damit man eingebundene Dateien oder Ressourcen nicht einfach automatisiert abfragen kann. Die Zahlenkombinationen werden zufällig generiert und mit dem Dateinamen verknüpft.

Man findet die CSS Definitionen auch an folgender Stelle auf dem Webserver (in der typo3-Verzeichnisstruktur) zum Schluss der Konfigurationsdatei. Dort herumzubasteln ist aber nicht empfehlenswert, da Änderungen möglicherweise überschrieben werden bei TYOP3 Updates oder Aktualisierung von Extensions.

..htdocs/typo3/sysext/css_styled_content/static/setup.txt

..
..
..
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (
    /* Captions */
    DIV.csc-textpic-caption-c .csc-textpic-caption { text-align: center; }
    DIV.csc-textpic-caption-r .csc-textpic-caption { text-align: right; }
    DIV.csc-textpic-caption-l .csc-textpic-caption { text-align: left; }

usw.

Die verwendeten Styles findet der geübte Webmaster anhand des Beispiels realtiv schnell im HTML Quelltext der Seite und kann die benötigten Style Definitionen in die eigene CSS Datei übernehmen und dort verändern.

Um die eigene CSS Datei zu verwenden, genügt es das Template der Webseite durch folgende TypoScript Anweisung zu ergänzen:

# Template für Webseite "Neues Projekt" (Kommentarzeile)
page.includeCSS.file1=fileadmin/css/codelevelx.css
page = PAGE
page.100 < styles.content.get

Durch diese zusätzliche Anweisung oder besser gesagt Attribut "page.includeCSS" wird die Datei codelevelx.css im Verzeichnis fileadmin/css/ in die HTML Ausgabe der Webseite integriert und sozusagen eingebunden:

<link rel="stylesheet" type="text/css" href="fileadmin/css/codelevelx.css?1314138090" media="all">

CSS Definitionen ändern

Leider gibt es über die CSS Definitionen im css_styled_content keine vollständig dokumentierten Zuordnungen. Selbst die TYPO3 Plattform stellt hier nur eine sehr spärliche Dokumentation zur Verfügung wenn man es denn überhaupt so bezeichnen möchte:

http://typo3.org/documentation/document-library/extension-manuals/bk_cssstyledcontent/current/

Die effektivste Variante ist es daher, sich den Quelltext der HTML Seite im Browser anzeigen zu lassen und die Klassen und Definitionen der dargestellten Elemente zu übernehmen und zu ändern soweit notwendig. Von der Beispielseite mit dem eingegebenen Content ist unten der interessante Teil des Quelltextes übernommen. Dieser enthält auch zahlreiche Kommentare über die einzelnen Inhaltselemente. Wenn eine Seite produktiv wird, sollte man diese Kommentare durch folgende Codezeile im TypoScript des Templates wieder entfernen:

page.config.disablePrefixComment = 1

Die eigene CSS Seite des Projektes wird übrigens nach der statischen Seite des css_styled_content eingefügt, so dass sämtliche CSS Definitionen in der css_styled_content in der eigenen CSS Datei einfach überschrieben werden können, soweit notwendig oder gewünscht.

(HTML Code Webseite mit CSS Definitionen)

Die Standard Textdefinition erfolgt im p-tag mit der definierten Klasse bodytext.

p.bodytext {
  margin:0;
  margin-bottom: 10px;
  padding:0;
  font-family: verdana;
  font-size: 13px;
}

Hier werden die Abstände innen und außen vom Textcontainer definiert (10 Pixel Abstand unten zum nachfolgenden Objekt) sowie die Schriftart Verdana und die Fontgröße 13 Pixel. Standard Schriftfarbe ist schwarz.

.important {
 color: #003060;
 font-weight: bold;
}

Wenn eine Textstelle mit Textstil "important" markiert ist, wird diese fett und in dunkelblau (Farbcode #003060) dargestellt.

h1 {
  margin:0;
  padding:0;  
  color:#f06e43;
  font-family: verdana;
  font-size: 24px;
}

Für die Überschrift des Textabschnitts werden für den Textcontainer der Überschrift kein Abstände definiert (margin und padding 0), Schriftart Verdana in Größe 24 Pixel und Farbe orange (Farbcode #f06e43).
Hier wurde generell einfach die H1 Überschriften Klasse neu definiert. Ob das praktikabel ist, kommt immer auf das Projekt drauf an. Ggf. muss man Klassen kaskadieren.

Weitere wichtige Klassen bei einem sog. Textpic Objekt (Text und Bild) sind z.B. csc_textpic_image, csc_textpic_caption, csc_textpic_imagewrap und csc_default.

Über die CSS Attribute können neben den Anzeigeeigenschaften auch die Positionierung beeinflußt werden über position, float, text-align, vertical-align usw. Aber Achtung: Häufig werden unterschiedliche Klassen benutzt für das ERSTE Element und für die folgenden Elemente (um diese unterschiedlich zu formatieren). Der kluge Webmaster sollte daher immer mindestens 2 gleiche Inhaltselemente auf eine Seite bringen sofern der Redakteur das auch kann. :-)

Eine recht gute CSS Referenz ist http://www.css4you.de/.
Auf http://de.selfhtml.org/index.htm erhält man recht gute Informationen auch zu anderen Webbereichen, allerdings ist die Seite etwas antiquiert. War eigentlich früher mal eine sehr gute Referenz. Das neue Wiki Projekt scheint auch nicht so recht in Schwung zu kommen. Schade eigentlich.


Für die Nutzung dieses Angebotes gelten die AGB, insbesondere der Haftungsausschluss.



AutorNewsFeedbackImpressumAGBDatenschutz
...