Zum Inhalt springen

CSS-Problem

Erstellt am 13. Februar 2005 · 13 Antworten · letzte Antwort am 3. September 2005

Tags: Frage

Unbekannter Benutzer ·

Hi @ all!

Bin noch newbie in Sachen typo3 und habe mich bisher an das tutorial von Kaspar und das Buch von Andreas Stöckl orientiert.

Leider bekomme ich das mit der CSS-Formatierung nicht so hin. Ich habe eine eigene CSS-Datei über Typoscript eingebunden:

# Default PAGE object:
seite = PAGE
seite.stylesheet = fileadmin/template_data/ansicht.css
seite.typeNum = 0
seite.10=TEMPLATE
seite.10 {
  template=FILE
  template.file=fileadmin/template_data/index.html
  workOnSubpart = DOKUMENT
  marks.INHALT < styles.content.get

  marks.MENUE = HMENU
  marks.MENUE.1 = TMENU
  marks.MENUE.1.NO {
    allWrap = <div id="sub-nav-1-no"> | </div><br>
  }
...

In dieser ansicht.css wollte ich das gesamte Aussehen der Seite definieren. Dies gelingt mir nur bedingt, da über die eingebundene Extension

css_styled_content

die einzelnen Seitenelemente zusätzlich definiert werden, wie z.B. <div class="csc-header csc-header-n1">
oder <p class="bodytext">.

Wo kann ich diese css-Elemente finden und anpassen?

Ist es evtl. sogar besser die css-Anpassung komplett in typo3 zu verankern statt in einer externen Datei. M.E. sollte es in der externen Datei besser sein, da ich dann zentral alles anpassen kann, ohne zu suchen ;-)

Habe schon im typo-object-browser, im constant-editor und auch über List...Weltkugel...Statisches Template nachgesehen und nichts finden können.

Bin dankbar für jeden Tipp!

blackraider

torst.​ ·

Hallo blackraider,

die "extension" CSS-Styled-Contend ist ein Basistemplate, mit dem Dir viel Programmierarbeit abgenommen werden soll. Darin werden durch eine allgemeine Typo-Script Programmierung Inhalte für die Ausgabe auf Deiner Homepage aufbereitet.

Vorteil dieser Extension ist, dass Du Dich jetzt nur noch auf diese vorgefertigten Elemente Beziehen musst, um deren Funktionalität zu übernehmen.

Also mal als Praktisches Beispiel:

marks.INHALT < styles.content.get

Damit kopierst Du die Vorgaben des Objektes styles.contend.get, welches in dem CSS-Styled-Contend Template definiert ist, auf Dein marks.INHALT.

Wie der Name CSS-Styled-Contend schon verrät, werden die Inhalte dabei mit individuellen Classen versehen.

Möchtest Du die Ausgabe dieser Classen ändern, so musst Du die Passagen aus dem Basistemplate neu definieren, indehm Du z.B. den Objektbrowser oder den Templateanalyser benutzt.
Ich würde Dir empfehlen Dir mal das Script des CSS-Styled-Contend in ruhe durchzusehen, damit Du einfach in etwa weißt, welche Objekte definiert und somit für Dich zur Verfügung stehen. Meistens reicht dann eine Codezeile in Deinem Template aus, um die gewünschte Änderung herbeizuführen.

Also um Deine Frage zu beantworten, schau mal im CSS-styled-contend unter folgendem nach:

# Content header:
lib.stdheader = COA
...
stdWrap.dataWrap = <div class="csc-header csc-header-n{cObj:parentRecordNumber}">|</div>

Ich halte es aber für empfehlenswert die Classen beizubehalten und diese je nach Bedarf in Deinem Stylesheet zu definieren (SelfHTML!). Das Einbinden von Styles in den Dokumentenkopf über Typoscript wird nur Deine Seiten vollmüllen und schwergängig machen, da alle Klassen auf allen Seiten eingebunden werden. (Auch manche Extensions machen dies... #paralyzed# )

Beste Grüße
Torsten

Unbekannter Benutzer ·

Hallo Thorsten,

erst einmal vielen Dank für Deine Antwort und Hilfestellung. Gerade am Anfang klappt trotz Bücher und Anleitungen leider nicht immer alles einwandfrei...

Ich halte es aber für empfehlenswert die Classen beizubehalten und diese je nach Bedarf in Deinem Stylesheet zu definieren (SelfHTML!).

So in etwa hatte ich mir das auch vorgestellt ;-) CSS ist kein Problem, nur die Funktion von typo3 macht mir Probleme...

Das Einbinden von Styles in den Dokumentenkopf über Typoscript wird nur Deine Seiten vollmüllen und schwergängig machen, da alle Klassen auf allen Seiten eingebunden werden. (Auch manche Extensions machen dies... icon_rolleyes.gif )

Ich hatte zuerst versucht, die css-Datei normal über die HTML-Vorlage einzubinden.

Sobald ich jedoch den Inhalt im Body-Tag durch einen Subpart einschließe (z.B. ###DOCUMENT###), wird die gesamte HTML-Datei bei der Ausgabe durch typo3 umgekrempelt.

Von meiner Ursprungs-HTML-Datei bleibt im Header nix mehr erhalten, d.h. der Verweis zur CSS-Datei ist weg. Im Body setzt typo3 korrekter Weise den Inhalt aus der Datenbank ein. Mein jetziger Code lautet:

#Sprachdefinition

config.sys_language_uid = 0
config.language = de
config.locale_all = de_DE

config.linkVars = L

[globalVar = GP:L = 0]
  config.sys_language_uid = 0
  config.language = de
  config.locale_all = de_DE

[globalVar = GP:L = 1]
  config.sys_language_uid = 1
  config.language = en
  config.locale_all = english
[GLOBAL] 

config.linkVars = L



# Default PAGE object:
seite = PAGE
seite.stylesheet = fileadmin/template_data/ansicht.css
seite.typeNum = 0
seite.10=TEMPLATE
seite.10 {
  template=FILE
  template.file=fileadmin/template_data/index.html
  workOnSubpart = DOKUMENT
  marks.INHALT < styles.content.get

  marks.MENUE = HMENU
  marks.MENUE.1 = TMENU
  marks.MENUE.1.NO {
    allWrap = <div id="sub-nav-1-no"> | </div><br>
  }

  marks.MENUE.1.ACT = 1
  marks.MENUE.1.ACT {
    allWrap = <div id="sub-nav-1-act"> | </div><br>
  }

  marks.MENUE = HMENU
  marks.MENUE.2 = TMENU
  marks.MENUE.2.NO {
    allWrap = <div id="sub-nav-2-no"> | </div><br>
  }

  marks.MENUE.2.ACT = 1
  marks.MENUE.2.ACT {
    allWrap = <div id="sub-nav-2-act"> | </div><br>
  }

  marks.SPRACHE = PHP_SCRIPT
  marks.SPRACHE {
  file = fileadmin/template_data/my_languageMenu.php
  }

}

Wie gesagt, wenn ich den CSS-Verweis aus dem Typo-Script lösche und in die HTML-Datei einfüge, entfernt typo3 bei der Ausgabe den kompletten Header und ersetzt ihn durch einen eigenen.

Bin hier nach dem Handbuch und dem Tutorial vorgegangen, in denen bei beiden die CSS-Datei im Header der HTML-Vorlage verankert sind. Als das nicht klappte, hab ich dann in der Referenz die Möglichkeit des Verweises innerhalb des TypoScript-Templates gefunden und umgesetzt.

blackraider

thebigtony ·

page.config.doctype = xhtml_strict
page.config.htmlTag_langKey = de
page.includeCSS {
file1 = fileadmin/page/css/main.css
file2 = fileadmin/page/css/main2.css
file3 = fileadmin/page/css/main3.css
...
}

Css Styled Content würde ich rauskicken.
Man benötigt nur die CSet stylesheet und content default.

Nich böse sein, aber wenn man richtig ordentlich mit CSS arbeiten möchte, nutzt man so gut wie gar nicht class und style, sondern arbeitet wenn möglich nur mit id. Inhalt und Design immer soweit wie möglich trennen.

Class nutzt man beispielsweise wenn man ein formatiertes Bulletlist Menü hat und z.B. der Oberste Link aus Designgründen ein anderes Hintergrundbild hat(dafür gibt es auch andere Möglichkeiten).

Sollte aber jeder selber wissen wie er an CSS rangeht.

Unbekannter Benutzer ·

Css Styled Content würde ich rauskicken.
Man benötigt nur die CSet stylesheet und content default.

Das hört sich interessant an ... ich nutze derzeit immer die css_styled_content und schmeiss den ganzen Müll (automatisch eingefügte css Definitionen etc.) raus.

Wie ist das bei diesem Konzept (cset + content default), kommt da defaultmässig der Müll gar nicht erst rein? Die content default hab ich noch als extrem tabellenlastig in Erinnerung ... hab mir die daher schon seit Ewigkeiten nicht mehr angesehen 😉

Danke schon mal für Info und viele grüße
Niki

johanness · · Beste Antwort

Hab oben nicht alles gelesen, aber die Lösung für die automatisch eingefügten <p>-Tags:

lib {
  parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
}

tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines >
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines {
  encapsTagList = div,p
  removeWrapping = 1
  wrapNonWrappedLines = |<br>
}

Das erste entfernt die Klasse im <p>-Tag, das zweite die <p>-Tags durch ein einfaches <br />

thebigtony ·
Niki schrieb

Css Styled Content würde ich rauskicken.
Man benötigt nur die CSet stylesheet und content default.

Das hört sich interessant an ... ich nutze derzeit immer die css_styled_content und schmeiss den ganzen Müll (automatisch eingefügte css Definitionen etc.) raus.

Wie ist das bei diesem Konzept (cset + content default), kommt da defaultmässig der Müll gar nicht erst rein? Die content default hab ich noch als extrem tabellenlastig in Erinnerung ... hab mir die daher schon seit Ewigkeiten nicht mehr angesehen 😉

Danke schon mal für Info und viele grüße
Niki

Kommt richtig schönes pures HTML raus, ohne Tabellen, class definitionen und sonstigen Müll.

Wobei Müll kann man nicht sagen, für einen der es als Hobby macht ist es noch ganz sinvoll.

Unbekannter Benutzer ·

@thebigtony: das war der Tipp schlechthin. Hab das neulich mal getestet und - wie angenehm 🙂 Konnte 2/3 meiner Konfiguration ausmisten. Und dann noch deutlich performanter. Ohne Deinen Tipp hätt ich die Dinger nie mehr angeschaut und weiter css_styled_content verwendet.

Viele Grüße
Niki

thebigtony ·

Na sag ich doch.
Bei Typo muss man immer etwas aufpassen, da versucht wird jeden Geschmack zu treffen, was den Jungs eigendlich auch gut gelingt.
Aber der Nachteil ist, dass man da schnell aus dem Konzept kommt und den Blick für das Wesentliche verliert.
Think simple.

jenses ·

Spätestens, wenn man z.B. die erste Überschrift im Text anders formatieren will als die nachfolgenden,
erkennt man den Sinn von csc.

Nich böse sein, aber wenn man richtig ordentlich mit CSS arbeiten möchte, nutzt man so gut wie gar nicht class und style, sondern arbeitet wenn möglich nur mit id.

Das halte ich für durchaus diskussionswürdig.
Wiederkehrenden, gleich formatierten Elementen weise ich doch Klassen zu und keine IDs (p class="bodytext" und nicht id="bodytext")

CSC ist nicht perfekt und durchaus verbesserungswürdig (es wird ja auch dran gearbeitet),
allerdings kann man damit vernünftig arbeiten.
Und ich muß nicht wie bei cSet Stylesheet irgendwelche Anweisungen ins Template schreiben.
Wo bleibt denn da die Trennung von Layout & Inhalt ?

viele Grüße
jenses

thebigtony ·

Das sind wir an dem Punkt.
Dem p wiese ich garnix zu.
Das schaut normal so aus

div#idMeinesDiv p {
    ...
    ...
}

Dann sind alle p tags in meinem div z.B. Für die Mittelseite so formatiert wie ich es will. Sollte der Fall auftreten, dies anders haben zu wollen, nutze ich dann inerhalb des p tags einen span, dem ich dann eine Klasse zuweise oder

div#idMeinesDiv p span {
    ...
    ...
}

Hab mich auch lange genug dagegen gewehrt, jetzt mach ich nichts mehr anders. Es gibt keinen eleganteren Weg Seiten zu gestallten.

Unbekannter Benutzer ·

jep. Wir haben neulich für einen Kunden einen Code Relaunch gemacht, Umstellung von altem Tabellen-HTML auf XHTML. Hat den Quellcode um 90% reduziert, um nur einen Vorteil zu nennen.

VIele Grüße
Niki

sirwylm ·

Hi!

thebigtony schrieb

page.config.doctype = xhtml_strict
page.config.htmlTag_langKey = de
page.includeCSS {
file1 = fileadmin/page/css/main.css
file2 = fileadmin/page/css/main2.css
file3 = fileadmin/page/css/main3.css
...
}

Css Styled Content würde ich rauskicken.
Man benötigt nur die CSet stylesheet und content default.

Nich böse sein, aber wenn man richtig ordentlich mit CSS arbeiten möchte, nutzt man so gut wie gar nicht class und style, sondern arbeitet wenn möglich nur mit id. Inhalt und Design immer soweit wie möglich trennen.

Class nutzt man beispielsweise wenn man ein formatiertes Bulletlist Menü hat und z.B. der Oberste Link aus Designgründen ein anderes Hintergrundbild hat(dafür gibt es auch andere Möglichkeiten).

Sollte aber jeder selber wissen wie er an CSS rangeht.

In Bezug auf diesen Thread würde es mich schon interessieren, wie man dann die "tables" aus Content Elementen wie "Text mit Bild" entfernt bzw. umgewandelt bekommt (bei reiner Verwendung von CSet stylesheet und content default)?

Dank im voraus für Tips/Hilfen!

sirwylm