---
title: "Contentausgabe anpassen (CSS-styled-content)"
url: "https://www.typo3.net/d/95510-contentausgabe-anpassen-css-styled-content"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2009-12-30"
last_reply: "2009-12-31"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Contentausgabe anpassen (CSS-styled-content)

Allgemein · 2 Antworten · gestartet 2009-12-30

## Eröffnungsbeitrag

**MB-Grille** · 2009-12-30 · [Beitrag #1](https://www.typo3.net/d/95510-contentausgabe-anpassen-css-styled-content/1)

Hallo,

ich möchte erstmal etwas allgemeines sagen: Typo3 finde ich eigentlich nicht schlecht, doch langsam bereuhe ich es mich mit diesem CMS eingelassen zu haben, weil:
1. Typoscript recht undurchsichtig ist
2. es entweder nicht genug Leute gibt die sich mit TS GUT auskennen oder keiner Lust hat ein gründliche Antwort zu geben die ich, und auch jeder andere versteht.
3. man keine gute Dokumentation zu den bestehenden TS-Struckturen findet.

Ich stoße immer wieder an Grenzen und weiss nicht wo und wie ich diese Probleme lösen soll.

Jetzt zum Problem:
Ich möchte für einen kleinen Bereich meiner werdenden Webseite die Contentausgabe verändern. Grundlage ist zur Zeit bei mir noch CSS-styled-content.
Ich möchte eine DIV-BOX haben die als Hintergrundbild das Bild des Contentobjektes (Text mit Bild) nutzt und der Text soll über dem Bild stehen!

Dazu habe ich bereits diese Anpassung vorgenommen:

```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 = COA
		26 {
			10 = TEXT
			10.value = <div class="content_unit floatbox clearfix" style="
			20 = TEXT
			20.value = background:#d66
			30 = TEXT
			30.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><!-- --></div>
		}
		26.insertData = 1		
	}
}
```

Die Hintergrundfarbe "#d66" habe ich angelegt um zu Testen ob es funktioniert. Hier soll nun das eigentlich das Bild rein und das ###IMAGES### soll raus.

So wie ich das CSS-styled-content verstehe, gibt es für jeden Contenttyp (Bild, Text, Formular) eigene Funktionen. Wenn man nun den Typ "Bild mit Text nutzt, werden die bestehenden Funktionen genutzt. Daher ist ###IMAGES### immer ein komplettes Bild mit img-html-tag ausgegeben.

für mich ist es aber undurchsichtig, wo steht, dass der Marker ###IMAGES### durch ein Bild ausgetauscht werden soll.

Im "Typo3 Kochbuch" steht zwar was von "ORIG_FILENAME", was den Pfad zur Originaldatei ausgeben soll, aber wie das funktioniert steht nicht in diesem Buch. Im Internet ist da auch nichts zu finden.

#angry#

BITTE ... wer kann mir Helfen?
Ich brauche eine genaue Erklärung damit auch ich das verstehe.

Wo kann man sich das Wissen über TS aneignen?

Gruß Grille.

## Antworten

### [#2](https://www.typo3.net/d/95510-contentausgabe-anpassen-css-styled-content/2) · Michaelh74 · 2009-12-30

Ja ich weiß, TS ist nicht immer einfach zu verstehen...

Ich würde mich definitiv in die Extension Programmierung einarbeiten. Wenn mal was über den TS Weg nicht klappen sollte, kannst Du immer noch schnell ein Plugin bauen, dass dies erfüllt. Geht meist auch sehr schnell.

Ansonste evtl. noch ein alternativer CSS Weg. Den Title Text per Negativ Margin ins Bild "hoch ziehen". Weiß aber nicht, ob der Weg wirklich zielführend ist, aber wäre einen Versuch wert.

Bei Deinem TS Problem hab ich leider keine direkten Ansatz. Außer du kannst das IMAGE per CASE auf IMG_RESOURCE setzen. Dann könntest Du das direkt in als background-image einbauen.
Für mehr müsste ich mich selbst intensiver mit der Problematik beschäftigen. Geht aber leider gerade aus Zeitmangel nicht.

Hoffe es hilft Dir trotzdem etwas weiter.

Viele Grüße
Michael

### [#3](https://www.typo3.net/d/95510-contentausgabe-anpassen-css-styled-content/3) · MB-Grille · 2009-12-31

Danke .. dann versuche ich mich mal über "IMG_RESOURCE" zu informieren.

---

Quelle: „Contentausgabe anpassen (CSS-styled-content)“, typo3.net, https://www.typo3.net/d/95510-contentausgabe-anpassen-css-styled-content
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.