---
title: "css_styled_content template verändern"
url: "https://www.typo3.net/d/87806-css-styled-content-template-veraendern"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2009-03-11"
last_reply: "2009-03-19"
replies: 6
solved: false
page: 1
pages: 1
lang: "de"
---

# css_styled_content template verändern

Allgemein · 6 Antworten · gestartet 2009-03-11

## Eröffnungsbeitrag

**MB-Grille** · 2009-03-11 · [Beitrag #1](https://www.typo3.net/d/87806-css-styled-content-template-veraendern/1)

Hallo,

Ich bin noch recht neu bei T3; bitte entschuldigt wenn ich bestimmte Sachen die für euch selbstverständlich sind, noch nicht so richtig verstehe. :o

Ich habe meine Webseite mit css_styled_content gestaltet (glaube ich). Wenn ich im Backend einen "Seiteninhalt" anlege (Text mit Überschrift und Bild) funktioniert auch die Ausgabe.

Die Ausgabe passt aber nicht zu meiner Gestaltung!

```html
<div class="csc-header csc-header-n1">
    <h1 class="csc-firstHeader">
        UEBERSCHRIFT
    </h1>
</div>
<div class="csc-textpic csc-textpic-intext-right">
            <div class="csc-textpic-imagewrap">
              <dl style="width: 162px;" class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol">
                <dt>
                    BILD
                </dt>
              </dl>
            </div>
            <div class="csc-textpic-text">
        <!--  Text: [begin] -->
              <p class="bodytext"></p>
        <!--  Text: [end] -->
            </div>
</div>
```

Ich brauche die Überschrift innerhalb der Box "<div class="csc-textpic csc-textpic-intext-right">".

Ich habe nun schon herrausgefunden, dass die Datei: "../typo3/sysext/css_styled_content/static/setup.txt" scheinbar das TypoScript enthält, welches für die Gestaltung der Seiteninhalts-Ausgabe verantwortlich ist.

hier habe ich was mit "header" gefunden:

```typoscript
# *****************
# CType: header
# *****************
# See Object path "lib.stdheader"
tt_content.header = COA
tt_content.header {
	10 = < lib.stdheader

	20 = TEXT
	20 {
		field = subheader
		required = 1

		dataWrap = <p class="csc-subheader csc-subheader-{field:layout}">|</p>
		htmlSpecialChars = 1

		editIcons = tt_content:subheader,layout
		editIcons.beforeLastTag = 1
		editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.subheader

		prefixComment = 2 | Subheader:
	}
}


# *****************
# CType: text
# *****************
tt_content.text = COA
tt_content.text {
	10 = < lib.stdheader

	20 = TEXT
	20 {
		field = bodytext
		required = 1

		parseFunc = < lib.parseFunc_RTE

		editIcons = tt_content:bodytext, rte_enabled
		editIcons.beforeLastTag = 1
		editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.bodytext

		prefixComment = 2 | Text:
	}
}
```

Ich weis nicht ob das wirklich damit zu tun hat.

Gibt es eine Möglichkeit die Ausgabe zu verändern so dass die Überschrift verschoben wird? Muß ich dazu diese "Setup.txt" verändern, oder kann ich auch von außen die Ausgabe beeinflussen?

Ich freue mich über jede Hilfe.
Grüße, Grille.

## Antworten

### [#2](https://www.typo3.net/d/87806-css-styled-content-template-veraendern/2) · Tante Jensen · 2009-03-12

Hallo,

du kannst die Anweisungen mit Angaben in deinem Template überschreiben (Angaben kopieren und ändern); die setup.txt lässt du besser in Ruhe, sonst ist beim Update alles futsch.

Ich bin mir nicht sicher (also ich denke eigentlich, dass es so ist), dass das nicht die Stelle ist, die du suchst. Am besten nach <div class="csc-header suchen.

Gruß, Nils

### [#3](https://www.typo3.net/d/87806-css-styled-content-template-veraendern/3) · MB-Grille · 2009-03-16

Hallo,

habe jetzt angefangen die Anweisung in mein Template zu schreiben, ohne die setup.txt zu verändern. scheinbar übernimmt er auch diese änderungen.

leider komme ich aber noch nicht weiter.

in diesen Zeilen scheint der Text und das Bild in eine Dvbox gepackt zu werden:

```typoscript
	layout = CASE
	layout {
		key.field = imageorient
		# above-center
		default = TEXT
		default.value = <div class="csc-textpic csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES### ###TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
		# above-right
		1 = TEXT
		1.value = <div class="csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES## ####TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
		# above-left
		2 = TEXT
		2.value = <div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES### ###TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
		# below-center
		8 = TEXT
		8.value = <div class="csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT### ###IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
		# below-right
		9 = TEXT
		9.value = <div class="csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT### ###IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
		# below-left
		10 = TEXT
		10.value = <div class="csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT### ###IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
		# intext-right
		17 = TEXT
		17.value = <div class="csc-textpic csc-textpic-intext-right###CLASSES### floatbox clearfix">###IMAGES### ###TEXT###</div>
		# intext-left
		18 = TEXT
		18.value = <div class="csc-textpic csc-textpic-intext-left###CLASSES### floatbox clearfix">###IMAGES### ###TEXT###</div>
		# intext-right-nowrap
		25 = TEXT
		25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES###<div style="margin-right:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
		25.insertData = 1
		# intext-left-nowrap
		26 = TEXT
		26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES###<div style="margin-left:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
		26.insertData = 1
	}
```

leider habe ich aber nicht die Stelle finden können, wo definiert wird, welcher Inhalt den Markter "###IMAGES###" ersetzen soll. Meine hoffnung war dann noch einen Marker "###HEADLINE###" zu basteln und diesen dann mit in die Div-Box zu setzen.

### [#4](https://www.typo3.net/d/87806-css-styled-content-template-veraendern/4) · MB-Grille · 2009-03-16

Leider bekomme ich das nicht hin ... darum habe ich jetzt die Überschrift in der Darstellung VOLL entfernt ...

Also kurz Schritt für Schritt:

in dieser Setup.exe steht unter "**# Content header:**" die erstellung der Überschrift. diese wird in der Variablen "**lib.stdheader**" gespeichert.

Jetzt werden die verschiedenen Contentarten aufgelistet: Text; Text mit Bild; Bild; Liste usw. In jedem wird "**lib.stdheader**" eingebaut. das kann zB. so aussehen:

```typoscript
tt_content.header = COA
tt_content.header {
	10 = < lib.stdheader
```

und so:

```typoscript
tt_content.image = COA
tt_content.image.10 = < lib.stdheader
```

um das Übertragen der Headline zu unterbinden habe ich für alle Content-Typen die jeweilige Variable "geleert":

```typoscript
tt_content.header.10 = <
tt_content.text.10 = <
tt_content.image.10 = <
tt_content.textpic.10.10 = <
tt_content.bullets.10 = <
tt_content.table.10 = <
tt_content.uploads.10 = <
tt_content.multimedia.10 = <
tt_content.mailform.10 = <
tt_content.search.10 = <
tt_content.login.10 = <
tt_content.menu.10 = <
tt_content.list.10 = <
```

unten wird dann eigentlich der text und das bild in eine DIV-Box gepackt, doch leider weis ich nicht wie das Bild und der Text an die jeweiligen ###MARKER### übergeben werden. ich glaube das passiert außerhalb der Setup.exe

### [#5](https://www.typo3.net/d/87806-css-styled-content-template-veraendern/5) · Michaelh74 · 2009-03-18

Also ne Setup.exe gibt es nicht ;-) Das ist das TS setup.

Versuch es mal damit oder konzentrier die auf diesen Bereich:

```typoscript
tt_content.textpic.10.if >
tt_content.textpic.20.text.10 >
```

Gibt ja 2 Möglichkeiten. Die Überschrift steht immer oberhalb von Text+Bild oder direkt innerhalb des DIVs.
Text mit Bild ohne Umfliessen ergibt Variante 1. Text mit Bild mit Umfliessen ergibt Variante 2.

Wie gesagt nur der TS Bereich ist interessant, in dem definiert wird, bei welche Bildpositionierung der Header wie eingebunden wird.

Hoffe das hilft schon mal weiter.

Gruß
Michael

### [#6](https://www.typo3.net/d/87806-css-styled-content-template-veraendern/6) · MB-Grille · 2009-03-18

Bis jetzt bekomme ich es einfach nicht hin.

In **tt_content.image.10** wird bei mir in Line 334 mit **= < lib.stdheader** die Überschrift reingepackt. Und **tt_content.image.20** ist dann der eigentliche Inhalt der Nachricht.

Irgendwie springt der dann in Richtung Zeile 1270 um sich da das Layout abzuholen:
**tt_content.image.20.layout.2** ist dann dieses layout:
**<div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div>**

und genau in dieser Zeile will ich die Headline haben"

also irgenwie einen Marker da rein:
**<div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES## ###HEADER### ####TEXT###</div><div class="csc-textpic-clear"><!-- --></div>**
und so:
**###HEADER### = < lib.stdheader**

Das ist eigentlich was ich will .. aber ich blicke da zur Zeit nicht durch.

### [#7](https://www.typo3.net/d/87806-css-styled-content-template-veraendern/7) · MB-Grille · 2009-03-19

ich glaube ich habe es ENDLICH geschafft.
ob das "sauber" oder "schmutzig" ist und vielleicht noch irgendwo fehler aufkommen läßt weis ich noch nicht. Hier der Code

```typoscript
tt_content.image.20 {
    layout = CASE
    layout {
      key.field = imageorient
      default = TEXT
      default.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES### ###TEXT###</div><div class="csc-textpic-clear"><!-- --></div></div>
      1 = TEXT
      1.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES## ####TEXT###</div><div class="csc-textpic-clear"><!-- --></div></div>
      2 = TEXT
      2.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES### ###TEXT###</div><div class="csc-textpic-clear"><!-- --></div></div>
      8 = TEXT
      8.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT### ###IMAGES###</div><div class="csc-textpic-clear"><!-- --></div></div>
      9 = TEXT
      9.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT### ###IMAGES###</div><div class="csc-textpic-clear"><!-- --></div></div>
      10 = TEXT
      10.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT### ###IMAGES###</div><div class="csc-textpic-clear"><!-- --></div></div>
      17 = TEXT
      17.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-intext-right###CLASSES### floatbox clearfix">###IMAGES### ###TEXT###</div></div>
      18 = TEXT
      18.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-intext-left###CLASSES### floatbox clearfix">###IMAGES### ###TEXT###</div></div>
      25 = TEXT
      25.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES###<div style="margin-right:{register:rowWidthPlusTextMargin}px;"> ###TEXT###</div></div><div class="csc-textpic-clear"></div><!-- --></div>
      25.insertData = 1
      26 = TEXT
      26.value = <div class="content_unit floatbox clearfix"><div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES###<div style="margin-left:{register:rowWidthPlusTextMargin}px;"> ###TEXT###</div></div><div class="csc-textpic-clear"></div><!-- --></div>
      26.insertData = 1
    }
  }

# *****************
# CType: textpic
# *****************
tt_content.textpic = COA
tt_content.textpic {
	10 = COA
	10.if.value = 25
	10.if.isLessThan.field = imageorient
	10.10 = < 

	20  = < tt_content.image.20
	20.text.10 = COA
	20.text.10 {
		if.value = 24
		if.isGreaterThan.field = imageorient
		10 = < 
		10.stdWrap.dataWrap = <div class="csc-textpicHeader csc-textpicHeader-{field:imageorient}">|</div>
	}
	20.text.20 = < lib.stdheader
	20.text.21 = < tt_content.text.20
}
```

also kurz zur Erklärung: im Objekt **tt_content.image.20** habe ich das Layout für mich angepasst.
und im Objekt **tt_content.textpic** habe ich die ausgabe der Überschriften geleert: **vorher: 10 = < lib.stdheader  jetzt 10 = <**

im Element **tt_content.textpic.20.text.20** war vorher die Ausgabe des Textes die ich mit der Ausgabe der Überschrift ersetzt habe: **20.text.20 = < lib.stdheader** und die Ausgabe des eigentlichen Textes (mit Bild (glaube ich)) habe ich in das Element **tt_content.textpic.20.text.21** gelegt:
**20.text.21 = < tt_content.text.20**

---

Quelle: „css_styled_content template verändern“, typo3.net, https://www.typo3.net/d/87806-css-styled-content-template-veraendern
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.