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)

  1. page.10.marks {
  2.         CONTENT_NORMAL = CONTENT
  3.         CONTENT_NORMAL {
  4.                 table = tt_content
  5.                 select {
  6.                         where = colPos = 0
  7.                         orderBy = sorting
  8.                         languageField = sys_language_uid
  9.                 }
  10.         }
  11. }

Typo3 intern

Folgendes passiert, wenn Typo3 einen Marker mit einem cObject CONTENT ausgeben soll:

  1. 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.
  2. 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)

  1. page.10.marks{
  2.         CONTENT_NORMAL = CONTENT
  3.         CONTENT_NORMAL {
  4.                 table = tt_content
  5.                 select {
  6.                         where = colPos = 0
  7.                         orderBy = sorting
  8.                         languageField = sys_language_uid
  9.                 }
  10.         }
  11.         CONTENT_RECHTS = CONTENT
  12.         CONTENT_RECHTS {
  13.                 table = tt_content
  14.                 select {
  15.                         where = colPos = 2
  16.                         orderBy = sorting
  17.                         languageField = sys_language_uid
  18.                 }
  19.                 renderObj < tt_content
  20.                 renderObj.stdWrap.wrap (
  21.                         <table width="100%" border="1">
  22.                                 <tr><td bgcolor="#FF0000">&nbsp;</td></tr>
  23.                                 <tr><td>|</td></tr>
  24.                         </table>
  25.                 )
  26.                 renderObj.stdWrap.required = 1
  27.         }
  28. }

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:

Kommentar von: musti

16. 05. 2007, 10:48
Hallo,

kann mir jemand sagen wie das HTMLCode für diese Beispiel aussieht!!??


Profil

Kommentar von: Mauch

08. 01. 2006, 17:51
Hallo

Eine Frage? Bei mir Steht im Script:

Typoscript:Zeilennummerierung:  An / Aus

  1. # Inhalt der rechten Spalte ausgeben
  2.     RECHTS = COA
  3.     RECHTS.10 = CONTENT
  4.     RECHTS.10 {
  5.        table = tt_content
  6.        select.where = colPos = 2
  7.        select.orderBy = sorting
  8.        languageField = sys_language_uid
  9.  
  10.        renderObj < tt_content
  11.        renderObj.stdWrap.wrap {
  12.           <table width="100%" border="1">
  13.           <tr><td bgcolor="#FF0000"> </td></tr>
  14.           <tr><td><class"inhalt_rechts">|
  15.           <tr><td>|</td></tr>
  16.           </table>
  17.        renderObj.stdWrap.required = 1
  18.        }
  19.        
  20.      }


Aber ich erhalte eine Zeile:

Html4strict:Zeilennummerierung:  An / Aus

  1. <td valign="top" align="left" width="100%" bgcolor="#D3E2F9" class="inhalt_rechts">
  2.  
  3.            <img src="clear.gif" width="110" height="50"><br>
  4.            <a name="39"></a><font face="verdana" size="3"><b>[GUI]<a href="http://www.ergosystems.de/typo3/typo3/alt_doc.php?edit[tt_content][39]=ed


Wie kann ich denn nun die Überschrift per CSS ansprechen???

Hier noch die CSS:

Html4strict:Zeilennummerierung:  An / Aus

  1. .inhalt_rechts{
  2.    font-family: verdana, arial, helvetica, sans-serif;
  3.    color: #061467;
  4.    font-size: 10px;
  5. }
  6.  
  7. .inhalt_rechts h1{
  8.    font-family: verdana, arial, helvetica, sans-serif;
  9.    color: #061467;
  10.    font-size: 11px;
  11. }



Kommentar von: NCoDer

31. 10. 2005, 0:13
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.



Kommentar von: Achim

12. 10. 2005, 11:00
Php:Zeilennummerierung:  An / Aus

  1. ###TYPOSCRIPT_BUFFER_MARKER_MMCMS###



Kommentar von: tobi

21. 09. 2005, 17:12
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.




Kommentar von: Harder

07. 09. 2005, 1:11
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
Html4strict:Zeilennummerierung:  An / Aus

-Tag anwenden???[/HTML]


Kommentar von: stefan

03. 09. 2005, 16:02
Ich fände es interessant, ob es Möglich ist z. B. die Headline einzeln
per css zu formatieren.


Kommentar von: Oliver Thiele

01. 06. 2005, 13:32
@Sutter:
Danke für den Fehlerhinweis. Die korrigierte Version ist online.



Kommentar von: Sutter

31. 05. 2005, 12:27
Sehr interessant, damit wäre es vermutlich auch möglich mittels

Typoscript:Zeilennummerierung:  An / Aus

  1. renderObj < tt_content
  2. renderObj.stdWrap.wrap (
  3.    <table width="100%" border="1">
  4.         <tr><td bgcolor="#FF0000"> </td></tr>
  5.         <tr><td><div class"rechts">|</div>
  6.         </td></tr>
  7.    </table>
  8.    renderObj.stdWrap.required = 1
  9. }


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

  1. renderObj < tt_content
  2. renderObj.stdWrap.wrap (
  3.    <table width="100%" border="1">
  4.         <tr><td bgcolor="#FF0000"> </td></tr>
  5.         <tr><td>|</td></tr>
  6.    </table>
  7. }
  8. renderObj.stdWrap.required = 1
???


Kommentar von: kkm

03. 05. 2005, 9:05
ENDLICH neue Website und bessere Übersicht als voher...




Seite drucken
 
TYPO3 Version 4.2.0 testen

TYPO3 Ver. 4.2.0 testen

Testen Sie die neue TYPO3 Version 4.2.0 kostenlos für einen Monat

TYPO3 Bücher

TYPO3 Workshops


TYPO3 Einführungsschulung
in Espelkamp:
Montag, 02.06.
in Berlin:
Montag, 07.07.

TYPO3 Intensivschulung
in Würzburg:
Mi., 28.05. - Fr., 30.05.
in Espelkamp:
Mi., 04.06. - Fr., 06.06.
in Köln:
Mi., 18.06. - Fr., 20.06.
in Berlin:
Mi., 09.07. - Fr., 11.07.


TYPO3 Extensionschulung
in Espelkamp:
Mo., 09.06. - Mi., 11.06.
in Berlin:
Mo., 14.07. - Mi., 16.07.