Zum Inhalt springen

css_styled_content - wie bekomme es mit css formatiert

Erstellt am 29. Dezember 2006 · 7 Antworten · letzte Antwort am 3. Januar 2007

Tags: Frage

oliver67 ·

Hallo,

also Doku wälzen für typo ist mühsam. Seit Tagen kämpfe ich mit einem eigentlich kleinen Problem für ein CMS:

Nachdem ich mein Template erfolgreich integriert habe, sollte jetzt eigentlich der Content ordentlich im CI (Vorglage stylesheet css) auch erscheinen.

Aber dieses "ver...." css_styled_content verhunzt den Code dermaßen, das der Content nicht zum Design der Seite passt.
z.B.

<div class="csc-textpicHeader csc-textpicHeader-{field:imageorient}">|</div>

Da ich noch neu bin, kenn ich mich natürlich nicht so genau aus, wo welche Daten sind, wie man daran kommt und wie man sie entsprechend verarbeitet.

Doku zu css_styled_content ist mehr als mager

Fragen:

1: Wie kann man diese Formatierungen manipulieren, damit der Text nachher so aussieht wie man es haben will?

Grund, die Formatierungen sind in der von Typo generierten Stylsheet diese id und classen für den Header nicht vorkommen.

2: Wie bekommt man Content ausgegeben, wenn man css_styled_content NICHT benutzt?

Grund, hatte versucht ohne dieses #evil# css_styled_content auszukommen, habe aber dann keinen Content bekommen. Habe auch keine anderen Standard-Template eingebunden.

3: Wie kann ich den Überschriftsnamen eines Seiteninhaltselementes (also nicht den Seitentitel) in mein Template?

Grund, die Idee war dann den Seiteninhalts-überschrifts-text auszublenden und ihn dann mit autoparser im template dann generieren zu lassen, als text. Nur habe ich keinen Plan wie ich diesen text ermittle und ihn dann im Skript zuweise.

Es hat Jahre gedauert bevor ich mich an Typo3 herangewagt habe, jetzt weiß ich warum 😢

Aber vielleicht gibt es ja hier jemanden der mir meine Fragen beantworten kann 😃 .

Im Forum habe ich keine passende Lösung gefunden, nur dass es viele gibt die dieses Problem auch haben, auch Dokus haben mich nicht weiter gebracht.
Lösbar ist es wie ich auf http://www.mittwald.de gesehen habe.

Bitte dringend um Hilfe!

CU
Oliver #angry#

Sareen ·

HI Oliver,

Du hast 2 Möglichkeiten:

1. Du schreibst Dein Style-Sheet so um, dass es die von CSS-Content generierten

class="csc-textpicHeader csc-textpicHeader-{field:imageorient}"

bedienen kann.

2. Du manipulierst CSS-Content den HTML Code so auszugeben, dass er zu den Style-Sheets passt, die Du geschrieben hast: #

lib {     
    #RTE Tuning
    parseFunc_RTE {
        nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
        nonTypoTagStdWrap.encapsLines.remapTag >
        nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >    
        #Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
        parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6
    }
    #stdheader Tuning
    stdheader {
        #Entfernt die zusätzlichen CSS-Klassen
        3 = LOAD_REGISTER
        3.headerClass =
        3.headerClass.noTrimWrap = |
        stdWrap.dataWrap = |
        #Standard-Headings aufräumen
        stdWrap.dataWrap =
        10.1.fontTag = <h1>|</h1>
        10.2.fontTag = <h2>|</h2>
        10.3.fontTag = <h3>|</h3>
        10.4.fontTag = <h4>|</h4>
        10.5.fontTag = <h5>|</h5>
    }
}     

tt_content {
    #Content Elemente aufräumen und Kommentare entfernen
    stdWrap.dataWrap >
    stdWrap.prefixComment >
    header.20.dataWrap >
    header.20.prefixComment >
    default.prefixComment >
    text.stdWrap.prefixComment >
    text.20.prefixComment >
    textpic.20.stdWrap.prefixComment >
    table.20.stdWrap.prefixComment >
    mailform.20.stdWrap.wrap >
    menu.20.stdWrap.prefixComment >
    image.20.stdWrap.prefixComment >
    list.20.stdWrap.prefixComment > 
}

Hilft Dir das weiter?

Sareen

oliver67 ·

Hallo Sareen,

erst mal wünsch ich Dir ein guten neues Jahr.

Zu deiner Antwort:

1: css stylesheet anpassen
diese Lösung würde ich auch gern mal ausprobieren, aber ich hänge dauern daran,das ich die css-Klasse nicht wirksam bekomme.
Der HTML Text sieht so aus:

<div id="container"><!--###container### begin -->
	<div id="header"><!--###header### begin -->
		<div id="othermenu"><!--###othermenu### begin -->
		...
		<!--###othermenu### end --></div>
		<div id="Rahmen">
                <!--###Rahmen### begin -->
		<ul id="Navigation">
                ....
                </ul>
	        <div></div>
	        <!--###Rahmen### end --></div>
	<!--###header### end --></div>
	<div id="main"><!--###main### begin -->
		<div id="left"><!--###left### begin -->
		<h3 id="men_title">Über Uns</h3>
		<ul id="subnavigation">
                .... 
                </ul>
		<!--###left### end --></div>
		<div id="right"><!--###right### begin -->
		<h2 id="headline"></h2>
		<div id="content">
	<!--  CONTENT ELEMENT, uid:4/textpic [begin] -->
		   <a id="c4"></a>
		<!--  Image block: [begin] -->
<div class="csc-textpic csc-textpic-intext-right-nowrap">
<div class="csc-textpic-imagewrap">
<dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:80px;">
<dt><img src="uploads/pics/02a.jpg" width="80" height="52" border="0" alt="Gem" title="Gem" longdesc="gfdgdf" /></dt>
<dd class="csc-textpic-caption">Gem</dd></dl></div>
<div style="margin-right:90px;"><div class="csc-textpic-text">
		<!--  Header: [begin] -->
			<div class="csc-textpicHeader csc-textpicHeader-25"><h1 class="csc-firstHeader">Willkommen </h1></div>
		<!--  Header: [end] -->
			
		<!--  Text: [begin] -->
			<p class="bodytext">...</p>
		<!--  Text: [end] -->
			</div></div></div><div class="csc-textpic-clear"><!-- --></div>
		<!--  Image block: [end] -->
			
	<!--  CONTENT ELEMENT, uid:4/textpic [end] -->
			
	<!--  CONTENT ELEMENT, uid:4/textpic [end] -->
		</div><!--###right### end --></div>
	<!--###main### end --></div>

	<div id="footer"><!--###footer### begin -->© 2002 
			        <div id="lastupdate">Letzte Aktualisierung:&nbsp;02.01.2007, 16:55&nbsp;Uhr</div>
    <!--###footer### end --></div>
<!--###container### end --></div>

Vielleicht weißt du wie man solche DIV-Verschachtelungen richtig im CSS andressiert. Vor allem wie gibt man denn so was an

... class="csh-textpic csh-textschlagmich-tot" ...

zu 2. Also irgendwie funktioniert das gar nicht, wahrscheinlich habe ich das in den falschen tsconfig-bereich kopiert.
Wo kommt das denn hin?

viele Grüße

Oliver

Michaelh74 ·

Also wenn Du in Deinem CSS sowas in der Art

.csh-textpic {
    color: #333333;
}

solltest Du z.B. Einfluß auf die Schriftfarbe des Elements nehmen können.
Geht zumindest bei mir...

Gruß
Michael

oliver67 ·

ZU 1:

Danke für die Tipps und Hinweise, also den Teil 1 kapier ich jetzt.

in der CSS-Datei muss dann wie folgt adressiert werden:

DIV.csc-header .csc-firstHeader {
    ...
}

DIV.csi-textpic DIV DIV.csi-text .bodytext {
    ...
}

Verwirrend war das zusätzliche DIV, das keine Klasse oder ID besitzt, aber es ist notwendig, sonst geht es nicht.

Um die Überschrift vom Content zu trennen und separat zu formatieren habe ich einen Hinweis gefunden:

http://www.sk-typo3.de/Feintuning.122.0.html

man muss die Extension cron_cssstyledimgtextnoch laden und ins template einbinden.

#Überschriften vom Block lösen (Hack)
tt_content.textpic.10.if >
tt_content.textpic.20.text.10 >

ok das war das 🙂

Michaelh74 ·

Bin mir nicht so sicher, ob die Installation der Ext. cron_cssstyledimgtextnoch so ne gute Idee war, denn seit ca. T3 Version 4.0 sind die Bild mit DIVs eingebunden und nicht mehr mit tables.

Vielleicht gehts ja trotzdem, aber sollte demnach auch ohne möglich sein.

Gruß
Michael

oliver67 ·

Hallo Michael,

nachdem Du Dich so skeptisch geäußerst hast, habe ich das Ganze ohne die ext cron_... ausprobiert.

Funktioniert immer noch #giggle# .

Also demnach reicht es die CSS anzupassen gem. dieser DIV Verschachtelungen und das Trennen des Headers vom Content.

Auch gut, wichtig ist es funktioniert und ich weiss wie es geht.

So damit sind meine Fragen 1 und 3 gelöst, und Frage 2 wird wohl noch eine Beschäftigung mit dem RTE geben, vielleicht hast du noch einen Tipp oder Link für mich wie man im RTE die Auswahlmenüs für Absaätze und Zeichen anpasst bzw. an seine Bedürfnisse anpasst und mit eigenen CSS formatiert.

Danke
Oliver

Michaelh74 ·

Hallo Oliver,

freut mich, daß es auch so geklappt hat.

Es gibt ne Doku zur htmlarea. Ist in der Ext. mit drin.

Alternativ gibt es hier im Forum auch einen sehr langen und ausführlichen Thread unter "RTE" wo alle Einstellungen und Formatierungen aufgeführt sind.

Den genauen Link dazu hab ich gerade leider nicht, ist aber sicher leicht auffindbar.

Viel Glück!
Michael