Zum Inhalt springen

klasse für jedes einzelne Content Element

Erstellt am 8. Januar 2010 · 6 Antworten · letzte Antwort am 13. Januar 2010

Tags: Inhaltselemente, Frage

cmoke ·

Hallöchen.

Ich möchte jedes ContentElement (egal welcher Art) mit einer Klasse versehen, um von vorn herein ein default-layout mit CSS zu erstellen (Hintergrund, Abstände, Rahmen, etc.). Habe auch schon einige Ansätze im Netz gefunden, nur keiner davon schlägt bei meinem Projekt an.

Habe also für die Inhalte von colPos=0 (Spalte normal) einen SUBPART im HTML bereitgestellt. Hierdurch werden die Daten abgelegt. Nun möchte ich aber nicht - wie bereits funtionsfähig erstellt - neue Rahmen für die Seiteninhalte definieren und den Redakeuren "zumuten" jedes Mal den neuen Inhalten einen Rahmen zuzuweisen. Eleganter wäre es wenn´s automatisch passieren würde.

Hier mein ausgelagerter TS für die Seiteninhalte:

page.10.subparts{
  
#Inhalte für die Spalte normal
  INHALTE = CONTENT
  INHALTE < styles.content.get
  INHALTE {
    stdWrap.wrap = <div id="content"> | </div>
    
  }
  
#Inhalte für die Spalte rechts
  AKTUELL = CONTENT
  AKTUELL < styles.content.getRight
  AKTUELL {
    stdWrap.wrap = <div id="in_aktuell"> | </div>
    #überträgt die Inhalte der Seite auf alle Unterseiten
    slide = -1
  }
  
#Inhalte für die Spalte ganz rechts
  TERMINE = CONTENT
  TERMINE < styles.content.getBorder
  TERMINE {
    stdWrap.wrap = <div id="in_termine"> | </div>
    #überträgt die Inhalte der Seite auf alle Unterseiten
    slide = -1
  }
  
  #Link zum Seitenanfang
  SEITENANFANG = COA
  SEITENANFANG.1 = TEXT
  SEITENANFANG.1 {
    data = getindpenv:REQUEST_URI
    wrap = <a href="|#seitenanfang" title="Nach oben" class="seitenanfang">zum Seitenanfang</a>
  }
  
}

Es geht also um die Zeilen 4 bis 9. Wie bekomme ich das hier hin, daß jeder einzelne Inhalt automatisch eine bestimmte Klasse zugewiesen bekommt. Wenn es geht, würde ich das hier mit einbinden.

Meine andere Frage wäre, wie ich ans Ende jedes Inhaltes den Anker (Zeilen 30 bis 35) für den Sprung an den Seitenanfang (oben) hinbekomme. Ist aber vielleicht ein extra post wert...

Danke für Eure Beiträge im voraus!

Julian.​Hofmann ·

Hallo.

Die Standard-Contentelemente werden von der Systemextension css_styled_content (in typo3/sysext/css_styled_content) generiert. Dort ist auch als Typoscript vieles zum Rendering zu finden - und das sollte der Einstiegspunkt für Deine beiden Fragen sein (meine Zeilen beziehen sich auf TYPO3 4.3).

Im Odner "static" der Extension findet sich wie üblich die setup.txt mit dem TS.
Um die Zeile 260 steht dann die Einbindung der Default-Klasse (bzw. 320-340 die Anpassungen der Klasse). Damit weißt Du, welche Eigenschaft zu überschreiben bzw. erweitern musst.

Und weil wir gerade im TS sind: in der Zeile 345 wäre der passende Ansatz für den toTop-Link.
Eine andere Lösung wäre, dass Du das linkToTop-Feld in den Contentelementen per Default auf angehakt setzt.

Viele Grüße
Julian

kolki ·

Oder so:

## Wrap - Content-Element
#########################
tt_content.stdWrap.dataWrap = <div class="content-element"><a id="c{field:uid}"></a>|</div>

Und dann:

## Subparts einbinden
#########################
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
  template = FILE
  template.file = fileadmin/template/index.htm
  workOnSubpart = DOCUMENT_BODY
  subparts.MAIN < styles.content.get
  subparts.RECHTS <  styles.content.getRight
  subparts.RECHTS.renderObj.stdWrap.wrap=<div class="content-element-rechts">|</div>
  subparts.LINKS< styles.content.getLeft
  subparts.LINKS.renderObj.stdWrap.wrap=<div class="content-element-links">|</div>
}
cmoke ·

Danke erstmal an Euch alle für die Antworten.

tt_content.stdWrap.wrap = <div class="content-box">|</div>

Zu helmets Antwort:das habe ich bereits probiert und es funktionierte leider nicht. Warum, weiß ich nicht, aber es wir immer nur der gesamte content gewrapt.

tt_content.stdWrap.dataWrap = <div class="content-element"><a id="c{field:uid}"></a>|</div>

Kolki...hier blick ich noch nicht ganz durch: wird hier allen Ankerelementen eine generierte ID vegeben? den zweiten Teil habe ich - ebenfalls ergebnislos - probiert.

Im Odner "static" der Extension findet sich wie üblich die setup.txt mit dem TS.

Julians Ansatz sieht sehr mächtig aus. Mit der Manipulation der Extension habe ich keine Erfahrung. Muss ich diese Textdatei (setup.txt), bzw. Teile davon für meine Bedürfnisse herauskopieren und irgendwo (wo?) einfügen? Werde aber jetzt mit diesem Ansatz weiterarbeiten.

Ihr müsst entschuldigen, wenn meine Rückfragen dilletantisch klingen, aber die erweiterte Handhabung von TS hat sich mir noch nicht gänzlich eröffnet.
🙂
Wäre trotzdem für weitere Hilfestellung dankbar!
Andreas

kolki · 
tt_content.stdWrap.dataWrap = <div class="content-element"><a id="c{field:uid}"></a>|</div>

Na ist doch ganz einfach:
Jeder Seiteninhalt erhält einen DIV-Container mit dem Namen "content-element". So kann man allen Seiteninhalten "content-element" gemeinsame beliebige Eigenschaften zuordnen.
Desweiteren wird für jeden einzelnen Inhalt auch eine eindeutige "id"(<a id="c{field:uid}") vergeben. Somit lassen sich im Bedarfsfall explizit auch einzelne Seiteninhalte per CSS ansprechen.

## Subparts einbinden
#########################
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
  template = FILE
  template.file = fileadmin/template/index.htm
  workOnSubpart = DOCUMENT_BODY
  subparts.MAIN < styles.content.get
  subparts.RECHTS <  styles.content.getRight
  subparts.RECHTS.renderObj.stdWrap.wrap=<div class="content-element-rechts">|</div>
  subparts.LINKS< styles.content.getLeft
  subparts.LINKS.renderObj.stdWrap.wrap=<div class="content-element-links">|</div>
}

Hat man beispielsweise ein 3-Spalten-Layout kann man hier für jede Spalte noch einmal einen DIV-Container ("content-element-links","content-element-rechts") erzeugen. Alle Seiteninhalte können also je nach Spalte auch unterschiedliche Eigenschaften bekommen.

Im Zusammenhang mit obigen "tt_content.stdWrap.dataWrap" hat man nun also "alle Waffen" Nun kann man die gewünschten Eigenschaften nach Herzenslust zuordnen.
Was will man mehr?

cmoke ·

So... dank Eurer Hilfe klappt´s jetzt wunderbar. Allerdings habe ich nur Teile Eurer Vorschläge adaptiert und in meinen ursprünglichen Script integriert. Jetzt habe ich sowohl jeweils ein DIV und eine Klasse für jedes content-Element, als auch die gewünschte Sprungmarke hinter jedem. An die styled-content Scripte/stylesheets habe ich mich noch nicht getraut.

# INHALTE AUSGEBEN
page.10.subparts{
  
  INHALTE = CONTENT
  INHALTE < styles.content.get
  INHALTE {
    #wrappt die einzelnen Inhalte der Spalte normal mit einem div, einer Klasse und einem Ankerelment für den Sprung zum Seitenanfang
    renderObj.stdWrap.wrap = <div class="content"> | </div> <div id="seitenanfang_div"><a href="#seitenanfang" title="Nach oben" class="seitenanfang">zum&nbsp;Seitenanfang</p></a></div>
    
  }
  
  AKTUELL = CONTENT
  AKTUELL < styles.content.getRight
  AKTUELL {
    stdWrap.wrap = <div id="in_aktuell"> | </div>
    #überträgt die Inhalte der Seite auf alle Unterseiten
    slide = -1
  }
  
  TERMINE = CONTENT
  TERMINE < styles.content.getBorder
  TERMINE {
    #wrappt den gesamten Inhalt der Spalte border mit einem div, einer Klasse und einem Ankerelment für den Sprung zum Seitenanfang
    stdWrap.wrap = <div id="in_termine"> | </div> <div id="seitenanfang_div"><a href="#seitenanfang" title="Nach oben" class="seitenanfang">zum&nbsp;Seitenanfang</p></a></div>
    #überträgt die Inhalte der Seite auf alle Unterseiten
    slide = -1
  }

Jetzt geht´s an die Rechtevergabe für Redakteure, dh. wir lesen uns noch irgendwo hier...