Zum Inhalt springen

CSS Klassen und Typo3

Erstellt am 6. Juni 2005 · 7 Antworten · letzte Antwort am 9. Juni 2005

Tags: HTML & CSS, Frage

Blockbuster ·

Hallo,

Ich beschäftige mich jetzt seit kurzem mit Typo3 und komme eigentlich gut voran.

Was ich nicht verstehe, ist wie sich Typo3 und die CSS verhält. Wenn ich mir z.B. ein Standard Template lade und mir die Klassen /ID im Firefox/Webdeveloper anschaue und dann Sie mit der CSS vergleiche sind da Klassen drin die nicht in der CSS auftauchen.

Könnte man mir kurz erklären wie die Zusammenhänge für CSS und Typo3 sind?

gibt es ein Grundgerüst für CSS?

Gruss,
Ralf

tinka ·

Hi Ralf,

Ich komm gut mit CSS zu recht - seitdem ich die Arbeitsweise von Typo3 verstehe. Er legt seine eigene Klassen an, und du musst deine eigene dementsprechend umbenennen.

Typo3 hat seine Standards wie ".bodytext" für Fliesstext, oder ".csc-firstHeader" für Überschriften etc.
Wenn mir das zuwenig ist, muss ich zu verschachtelten Klassen greifen wie

#divEins #divZwei .bodytext {
font-family: "Verdana", "Arial", sans-serif;
font-size: 90%;
...
}

Was noch wichtig ist, im Template beim "Include static (from extensions)" aus der Liste "CSS Styled Content" hinzufügen.

Gutes gelingen,
tinka
----------------------------------------------------
ACHTUNG NEWBIE: möglicherweise gibt
es cleverere Lösungen

Blockbuster ·

Hallo tinka

Danke für deine schnelle Antwort.

Wenn ich das richtig verstehe ist es so, das Typo3 ein Grundgerüst für die CSS hat. Gibt es dazu vieleicht eine Doku, wo man nachlesen kann welche ID/Klasse was steuert?

Gruss,
Ralf

tinka ·

Leider ist mir nichts bekannt.
Falls du was findest, poste es mal hier rein, würde mich auch interessieren.

gruss,
tinka

Unbekannter Benutzer ·

typo3 haut default-mässig erst mal alles mit css-Klassen voll. Den ganzen Sums schmeissen wir raus was relativ einfach geht. Dann einfach die Content-Elemente in divs wrappen, logisch auszeichnen und dann über divs formatieren.

Wir nehmen meist die statischen Templates content(default) und cSet stylesheet. Bei plugins kann man über den Object Browser das automatisch eingefügte default css schnell entfernen.

Viele Grüße!
Niki

Blockbuster ·

Hallo Niki

Deine Antwort hat mich viele Schritte weitergebracht. Hab Dank dafür.

Allerdings finde ich diesen Ablauf der CSS-Steuerung, ganz schön umständlich.

Gibt es eigentlich dafür eine CSS-Extension, die von Anfang an eine "Saubere" Umgebung erzeugt bezw. das Einbinden von vorgegebenen ID´s einfacher macht? Ich denke da auch an ein Grundgerüst von vorgegebenen Klassen/ID´s, die generell abgestimmt sind auf T3 und seine Extensionen. Gerade bei Templates rein auf TS-Basis (Tabellenlos) würde das ja einen Sinn machen.

Mag sein das diese Frage nur wegen mangelnder Erfahrungen mit T3 aufkommt.

Gruss,
Ralf

just2b ·

hallo ralf,

grunsätzlich ist es mal so, dass jede Extension ein eigenes css-Design mitbringt und dieses inline anlegt, da schaust du dir einfach mal an, wie die das benannt haben und dann schreibst du das ins setup:
plugin.tt_news._CSS_DEFAULT_STYLE >
=> das funktioniert für alle extensions (plugin.EXTENSION._CSS_DEFAULT_STYLE >) und blendet das css aus. Nun gehst du her und schreibst dir mit dem namen der vorher gemerkten Klassen dein eigenes Design.

und für den rest => einfach wenn du dein template erstellst bereits die klassen vernünftig vergeben und du kannst alles ansprechen was das herz begehrt.

hoff ich konnt dir weiterhelfen

Blockbuster ·

Hallo

Ich möchte mich nochmals bei allen Bedanken die mir Hilfestellung gegeben haben.

Durch eure Tipps und Anregungen, besonders der von Niki, (content(default) und cSet stylesheet) hat man mir sehr geholfen das Tabellenlose Template/CSS "XHTML strict" zu bekommen.
Das sorgte dann auch für diesen AHA-Effekt den wohl jeder Newbie erst bekommen muss, so kurz vorm Aufgeben.

Das zweite Problem (altText) habe ich mit der Extension "Alttext for Images" für die 3.8 Version gelösst.

Gruss,
Ralf