Zum Inhalt springen

Seiteninhaltstypen verschieden formatieren?? (-

Erstellt am 16. Juli 2005 · 9 Antworten · letzte Antwort am 17. Juli 2005

Tags: Templates & Layouts, Inhaltselemente, Frage

NoFugo ·

Hallo,

Ich möchte den rechten Teil meiner Seite (Platzhalter ###RECHTS###) mit einer eigenen HTML-Vorlage füllen können z.B. vom Inhaltstyp "Text" (siehe Screenshot: http://www.mousetomouse.de/screen.gif

Dieser muss sich jedoch vom Inhaltstyp "Text" für den Maincontent-Bereich unterscheiden, der standardmäßig formatiert wird.

Allerdings weiss ich nicht, wie ich diesen HTML-Code dynamisch in Typo3 bekomme, so dass Redakteure diesen mit einer Überschrift, Fließtext und ggf. einem link füllen können.

momentan wird diese rechte Spalte über folgendes TS angesprochen und somit auch ganz gewöhnlich formatiert:

      #Rechts
      RECHTS = CONTENT
      RECHTS {
       table = tt_content
       select.orderBy = sorting
       select.where = colPos = 2
      }

Der HTML-Code auf dem der Inhaltstyp "Text" (oder auch ein anderer Titel) in der rechten Spalte basieren soll, sieht folgendermaßen aus:

<table width="170" border="0" cellspacing="0" cellpadding="0">
  <tr>					
    <td><img src="fileadmin/images/rel_banner.gif" width="170" height="28" alt="" /></td>
  </tr>
  <tr>					
    <td class="related"><h3>Headline</h3>Fließtext</td>
  </tr>
</table>

Kann mir vielleicht jemand helfen? Trotz Literatur und Forum-Suchfunktion komme ich leider nicht weiter.
Vielen Dank.

toyde ·

Hi.

Vielleicht habe ich was missverstanden: aber du möchtest einfach die rechte Spalte anders formatieren, oder nicht?
In meinen Augen überlegst du etwas zu weit. Dein rechter Marker macht im Frontend nichts anderes, als HTML für die rechte Spalte auszugeben.
Somit kannst du doch simpel der rechten Spalte CSS-Klassen zuweisen, deren Formatierung sich entsprechend vom mittigen Hauptteil unterscheiden.

Falls Redakteure dann immernoch Farben etc. selbst bestimmen können müssen, gibts ja noch den mehr oder weniger praktischen RichText-Editor(sowie die Layoutfunktion für die Element-Titel).

Einen Erklärungsfehler machst du, glaube ich: Du vermischst das "Text"-Element mit einem HTML-Code. Entweder oder ;P

cya

NoFugo ·

Hallo toyde
und danke für die schnelle Antwort :p

ja, die rechte Spalte soll stets anders formatiert werden und wie auf dem Screenshot aussehen. Der Idealfall wäre, wenn ein Redakteur bei den Inhaltstypen ein "Einfacher Text für die Rechte Spalte" auswählen könnte.

Leider ist bei mir immer noch nicht durchgesickert, wie ich die einzelnen CSS-Klassen bestimmen und ansprechen kann. (Zur Info: css_styled_content ist installiert).

Deine Herangehensweise mit den CSS-klassen finde ich einleuchtend, allerdings kann ich doch bei einem Inhaltstyp "einfacher Text" lediglich bei Typ, eines von 5 Layouts aussuchen. Wenn ich beispielsweise "layout2" auswähle wird der text mit folgenden Klassen beschrieben:

<div class="csc-header csc-header-n1"><h2 class="csc-firstHeader">Überschrift</h2> ...

der Fließtext mit:

<p class="bodytext">Lorem ipsum dolor sit amet...

Problem ist jetzt, dass die Fließtexte selbst bei dem Standardlayout, alle mit der Klasse "bodytext" versehen werden und ich somit nicht die Möglichkeit habe, jedem Layout eigene CSS-Klassen zuzuweisen.

Ein weiteres Problem ist, dass über jeder Überschrift eine Grafik erscheinen soll. Wie sollte ich dies mit CSS anstellen ...?

toyde ·

hi.

Suche im Forum nach Wrap einzelner Contentelemente. Wirst sicher fündig. Ausserdem lässt sich das mit einem "img"-Tag +"br"-Tag recht einfach bewerkstelligen.

wrap = <img src="bla/img.jpg" alt="" /><br />|

Vielleicht hab ich mich etwas anders ausgedrückt, aber die "Text"-Elemente auf der rechten Seite kannst du doch der Klasse der ganzen rechten Spalte "unterwerfen"!!

<table class="MYRIGHTCONTENT">
<tr><td>Textzeug</td></tr>
..
</table>

->>> Jedes Element mit "Textzeug" wird dann so formatiert, wie du es der MYRIGHTCONTENT-Klasse befielst. Oder reicht das für dein Vorhaben nicht aus?

NoFugo ·

Vielleicht hab ich mich etwas anders ausgedrückt, aber die "Text"-Elemente auf der rechten Seite kannst du doch der Klasse der ganzen rechten Spalte "unterwerfen"!!

Eigentlich ja, leider sieht der Quellcode aber so aus:

<div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">Überschrift 1</h1><br /><img src="clear.gif" width="1" height="5" border="0" class="spacer-gif" alt="" title="" /><br /></div>
		<!--  Header: [end] -->
			
		<!--  Text: [begin] -->
			<p class="bodytext">Hier steht der Text1. Hier steht der Text1. Hier steht der Text1.</p>

		<!--  Text: [end] -->
			
	<!--  CONTENT ELEMENT, uid:45/text [end] -->
		
	<!--  CONTENT ELEMENT, uid:46/text [begin] -->
		<a name="46"></a>
		<!--  Header: [begin] -->
			<div class="csc-header csc-header-n2"><h1>Überschrift 2</h1><br /><img src="clear.gif" width="1" height="5" border="0" class="spacer-gif" alt="" title="" /><br /></div>
		<!--  Header: [end] -->
			
		<!--  Text: [begin] -->

			<p class="bodytext">Hier steht der Text2. Hier steht der Text2. Hier steht der Text2.</p>

... er pappt mir mitunter durchnummerierte div und h-tags um die Überschrift, so dass ich diese nicht explizit ansprechen und formatieren kann. Ausserdem werden die Überschriften und Fließtexte im Haupt-Content ebenso mit css-Klassen versehen ... und die will ich wiederum anders formatieren.

Kann man das denn wirklich nicht nach eigenem Willen formatieren??
#angry#

Diesen "wrap" den Du beschreibst, um über jedem Eintrga eine Grafik erscheinen zu lassen, wo müsste der hin?

Danke für Deine Geduld.

toyde ·

Zitat:
"Suche im Forum nach Wrap einzelner Contentelemente. Wirst sicher fündig. "

Das soll sone Art Anleitung sein, auf die Suche zu klicken und "content element wrap" einzugeben. 8-) Oder halt andere Suchbegriffe.

NoFugo ·

Ok, durch http://www.plug-one.de/links-in-spalten-dar.html habe ich zumindest jetzt die Grafik und die Formatierung für die Überschrift mit diesem TS-Code hinbekommen:

lib.stdheader.default.10.1.fontTag = <h1>|</h1>
lib.stdheader.1.10.1.fontTag = <h1>***|***</h1>
lib.stdheader.2.10.1.fontTag = <img src="fileadmin/images/rel_banner.gif" width="170" height="28" alt="" /><br /><h3>|</h3>
lib.stdheader.3.10.1.fontTag =<h1>...|...</h1>

Wie könnte ich mit dieser Methode jetzt das <p class="bodytext"> und das <div> tag auf der Rechten Spalte ansprechen? Ich habe etliches ausprobiert, aber ohne Erfolg ...

Ich habe lediglich diesen Code gefunden, mit dem ich allerdings generell alle <p>tags anspreche und selbts mit einer Klasse versehen kann:

   tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes {
        P.style = 
      }

Könnte man diesen Code nur auf die rechte Spalte anwenden?

toyde ·

Du bewegst dich in die richtige Richtung, aber ich glaube du kannst TypoScript nocht nicht zu 100% interpretieren.

lib.stdheader.default.10.1.fontTag = <h1>|</h1>
#bzw:
lib.stdheader.1.10.1.fontTag = <h1>***|***</h1>

> steht für Library(lib).Standardheader.Spalte(default,1,2,etc).Objekt(10=Text).Layout(1 für layout 1, 2 für layout 2,etc).. usw..

Du siehst in der lib liegt das Standardheader-Objekt. "default" steht für normalen Content, und die Nummererierung 1,2,3 für die restlichen Spalten. Unter "Template > TypoScript Object Browser" kannst du vorhandene Klassen nachschlagen, und ebenfalls neue Dinge reinkonfigurieren. Wenn du TypoScript besser verstehen möchtest (was für dein Vorhaben notwendig ist), würde ich eng mit diesem Tool zusammenarbeiten.

Wenn du das verstanden hast, dann wirst du sicher auch den Bodywrap für die rechte Spalte finden.

Habe dir noch ein Codebeispiel, um aus der Tabelle tt_content den DefaultContent (colPos=0) zu wrappen. Einfach für deine Spalte ergänzen. Viel Spass!

---------------------------------------------
---------------------------------------------
Setup (gleich am Anfang):

temp.maincontent = CONTENT
temp.maincontent < styles.content.get
temp.maincontent {
table = tt_content
select {
pidInList = this
orderBy = sorting
#colPos=0 -> DefaultContent
where = colPos=0
languageField = sys_language_uid
}
renderObj = COA
renderObj.wrap = <div class="ELEMENT" width="100%"> | </div><br><br>
renderObj.10 = TEXT
renderObj.10 {
field = header
wrap = <div class="ELEMENTTITEL" width="100%" height="8"><img
src="fileadmin/images/spacer.gif" border="0" width="0" height="8"> | </div><br><br>
}
renderObj.30 = TEXT
renderObj.30 {
field = bodytext
}
}

>>natürlich den img-Tag anpassen
Setup (bei subparts):

subparts.TPL_CONTENT < temp.maincontent

---------------------------------------------
---------------------------------------------

toyde ·

Zur Vervollständigung - die Spaltendefinitionen:

#default = normal, 1=left,2=right, 3=border