Seitenelemente in Abhängigkeit der Spalte unterschiedlich formatieren
Möchten Sie die Spalten Normal, Links, Rechts und Rand im Frondend unterschiedlich formatieren, hilft meist schon die Verwendung von CSS. Allerdings kann es auch vorkommen, daß sie z.B. Seitenelemente in der Rand-Spalte komplett umschreiben wollen.
Schauen Sie sich daher erst einmal an, was Typo3 macht, wenn ein Seitenelement ausgegeben werden soll.
TypoScript (Setup)
- page.10.marks {
- CONTENT_NORMAL = CONTENT
- CONTENT_NORMAL {
- table = tt_content
- select {
- where = colPos = 0
- orderBy = sorting
- languageField = sys_language_uid
- }
- }
- }
Typo3 intern
Folgendes passiert, wenn Typo3 einen Marker mit einem cObject CONTENT ausgeben soll:
- Typo3 macht eine Abfrage, welche Datensätze angezeigt werden sollen. In diesem Beispiel sollen die Inhalte aus der Tabelle tt_content kommen (Zeile 4). Daß nur Inhalte der aktuellen Seite ausgegeben werden soll nimmt Typo3 automatisch an.
Die Inhalte sollen nur aus der Spalte normal ausgegeben werden (Zeile 6).
Sortiert wird die Ausgabe anhand des sorting-Felds.
Bei einsprachigen Seiten muss Zeile 8 nicht angegeben werden. Diese Zeile sorgt dafür, daß nur die aktuelle Sprache ausgegeben wird. - Nachdem Typo3 nun weiß, was ausgegeben werden soll, muss Typo3 noch wissen, wie die Inhalte ausgegeben werden müssen.
Typo3 sucht nun standardmässig noch einer Beschreibung, wie Inhalte aus tt_content ausgegeben werden sollen. Meist haben Sie aus diesem Grund schon das statische Template content(default) oder css_styled_content im Template hinzugefügt.
Aufgabe ist es nun, Typo3 mitzuteilen, daß die Beschreibung für die Ausgabe von Seitenelementen dieses mal nicht direkt aus tt_content kommen soll, sondern aus einem selber neu geschriebenen tt_content oder aus einem modifizierten tt_content.
TypoScript (Setup)
- page.10.marks{
- CONTENT_NORMAL = CONTENT
- CONTENT_NORMAL {
- table = tt_content
- select {
- where = colPos = 0
- orderBy = sorting
- languageField = sys_language_uid
- }
- }
- CONTENT_RECHTS = CONTENT
- CONTENT_RECHTS {
- table = tt_content
- select {
- where = colPos = 2
- orderBy = sorting
- languageField = sys_language_uid
- }
- renderObj < tt_content
- renderObj.stdWrap.wrap (
- <table width="100%" border="1">
- <tr><td bgcolor="#FF0000"> </td></tr>
- <tr><td>|</td></tr>
- </table>
- )
- renderObj.stdWrap.required = 1
- }
- }
Code-Erläuterung:
In Zeile 19 wird definiert, das wir das Rendern dieser Inhalte aus der Beschreibung tt_content haben wollen, nur diesmal ist unser renderObj eine Kopie! Somit haben Sie ein Orginal tt_content für Ihren Content-Normal-Marker und eine Kopie, die Sie komplett neu- oder umschreiben könnten, für Ihren Content-Rechts-Marker.
In diesem Beispiel wurde jedes Seitenelement der Rechts-Spalte mit einer Tabelle umgeben.
Kommentare von registrierten Benutzern:
Hallo
Eine Frage? Bei mir Steht im Script:
| Typoscript: | Zeilennummerierung: An / Aus |
- # Inhalt der rechten Spalte ausgeben
- RECHTS = COA
- RECHTS.10 = CONTENT
- RECHTS.10 {
- table = tt_content
- select.where = colPos = 2
- select.orderBy = sorting
- languageField = sys_language_uid
- renderObj < tt_content
- renderObj.stdWrap.wrap {
- <table width="100%" border="1">
- <tr><td bgcolor="#FF0000"> </td></tr>
- <tr><td><class"inhalt_rechts">|
- <tr><td>|</td></tr>
- </table>
- renderObj.stdWrap.required = 1
- }
- }
Aber ich erhalte eine Zeile:
| Html4strict: | Zeilennummerierung: An / Aus |
Wie kann ich denn nun die Überschrift per CSS ansprechen???
Hier noch die CSS:
| Html4strict: | Zeilennummerierung: An / Aus |
- .inhalt_rechts{
- font-family: verdana, arial, helvetica, sans-serif;
- color: #061467;
- font-size: 10px;
- }
- .inhalt_rechts h1{
- font-family: verdana, arial, helvetica, sans-serif;
- color: #061467;
- font-size: 11px;
- }
Man kann doch den Inhalt der jeweiligen Spalte in ein eigenes div wrappen,
z.B. xxrightcol.wrap=<div class="col_r"> |</div>
und dann im Stylesheet div.col_r h1 {...}
formatieren.
Hier einige snippets zum Thema
Überschriften in verschieden Spalten anders darstellen
http://www.typo3wizard.com/Verschiedene_UEberschriften_fuer_die_verschiedenen_Spalten.103.0.html
Links für andere Spalte anders darstellen
http://www.typo3wizard.com/Verschiedene_Link_formatierung_fuer_die_verschiedenen_Spalten.43.0.html
Jedes Content Element einer Spalte gesondert wrappen
http://www.typo3wizard.com/Jedes_Content_Element_einer_Spalte_wrapen.93.0.html
Für die Links und die überschriften gäbe es nochmal die möglichkeit mit CSS selektoren zu arbeiten.
Ich möchte mich der Frage von Stefan anschließen: wie kann man den Tags beispielsweise der rechten Spalte css-Attribute zuweisen?
Kann man z.B. etwas wie addAttributes auf das -Tag anwenden???[/HTML]
Ich fände es interessant, ob es Möglich ist z. B. die Headline einzeln
per css zu formatieren.
@Sutter:
Danke für den Fehlerhinweis. Die korrigierte Version ist online.
Sehr interessant, damit wäre es vermutlich auch möglich mittels
| Typoscript: | Zeilennummerierung: An / Aus |
- renderObj < tt_content
- renderObj.stdWrap.wrap (
- <table width="100%" border="1">
- <tr><td bgcolor="#FF0000"> </td></tr>
- <tr><td><div class"rechts">|</div>
- </td></tr>
- </table>
- renderObj.stdWrap.required = 1
- }
den Inhalt der Tabelle über die CSS Klasse "rechts" anzusteuern?
Wieso steht in Zeile 25 renderObj.stdWrap.required = 1 vor der
Klammer ( } ), müsste es nicht heissen:
| Typoscript: | Zeilennummerierung: An / Aus |
- renderObj < tt_content
- renderObj.stdWrap.wrap (
- <table width="100%" border="1">
- <tr><td bgcolor="#FF0000"> </td></tr>
- <tr><td>|</td></tr>
- </table>
- }
- renderObj.stdWrap.required = 1
ENDLICH neue Website und bessere Übersicht als voher...







