[TYPO3-german] NEWBIE: Umsetzung eines HTML-Prototypen in Typo3

[schnabelvieh]

Natascha Oertel schrieb:
> also, ich denke du solltest erstmal die default styles rausschmeissen, 
> dann kannst du in dein stylesheet nur das einfügen was du brauchst. Ins 
> setup:
> plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE =
> 
> dann hier ein teil aus einem setup, wo ich mal für einen newsletter die 
> klassen ändern wollte...das ist nicht alles, aber wie du siehst musst du 
> im objektbrowser unter tt_content.image suchen. Das heisst du musst dir 
> erstmal ansehen im Quelltext wie Bilder zur Zeit dargestellt werden und 
> dann dir die entsprechende Stelle im Objektbrowser suchen und ändern
> 
> tt_content.image.20 {
>    addClassesImage.ifEmpty = firstcol lastcol
>    addClassesImage.override = firstcol |*| |*| lastcol
>    addClassesImage.override.if {
>        isGreaterThan.field = imagecols
>        value = 1
>        }
>    imageStdWrap.dataWrap = <div class="imagewrap" 
> style="width:{register:totalwidth}px;"> | </div>
>    imageStdWrapNoWidth.wrap = <div class="imagewrap"> | </div>
>    imageColumnStdWrap.dataWrap = <div class="imgcol" 
> style="width:{register:columnwidth}px;"> | </div>
>      layout = CASE
>    layout {
>        key.field = imageorient
>        default = TEXT
>        default.value = <div 
> class="above-center###CLASSES###">###IMAGES######TEXT###</div><div 
> class="clear"><!-- --></div>
>        1 = TEXT
>        1.value = <div 
> class="above-right###CLASSES###">###IMAGES######TEXT###</div><div 
> class="clear"><!-- --></div>
>        2 = TEXT
>        2.value = <div 
> class="above-left###CLASSES###">###IMAGES######TEXT###</div><div 
> class="clear"><!-- --></div>
>        8 = TEXT
>        8.value = <div 
> class="below-center###CLASSES###">###TEXT######IMAGES###</div><div 
> class="clear"><!-- --></div>
>        9 = TEXT
>        9.value = <div 
> class="below-right###CLASSES###">###TEXT######IMAGES###</div><div 
> class="clear"><!-- --></div>
>        10 = TEXT
>        10.value = <div 
> class="below-left###CLASSES###">###TEXT######IMAGES###</div><div 
> class="clear"><!-- --></div>
>              # intext-right
>              17 = TEXT
>        17.value = <div 
> class="intext-right###CLASSES###">###IMAGES######TEXT###</div>
>              # intext-left
>              18 = TEXT
>        18.value = <div 
> class="intext-left###CLASSES###">###IMAGES######TEXT###</div>
>        # intext-right-nowrap
>        25 = TEXT
>        25.value = <div 
> class="intext-right-nowrap###CLASSES###">###IMAGES###<div 
> style="margin-right:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div 
> class="clear"><!-- --></div>
>        25.insertData = 1
>        # intext-left-nowrap
>        26 = TEXT
>        26.value = <div 
> class="intext-left-nowrap###CLASSES###">###IMAGES###<div 
> style="margin-left:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div 
> class="clear"><!-- --></div>
>        26.insertData = 1
>    }
> 
>    rendering {
>        dl {
>            imageRowStdWrap.dataWrap = <div class="imagerow" 
> style="width:{register:rowwidth}px;"> | </div>
>            noRowsStdWrap.wrap =
>            oneImageStdWrap.dataWrap = <dl 
> style="width:{register:imagespace}px;"> | </dl>
>            imgTagStdWrap.wrap = <dt> | </dt>
>            editIconsStdWrap.wrap = <dd> | </dd>
>            caption {
>                required = 1
>                wrap = <dd class="caption"> | </dd>
>            }
>        }
>        div {
>            imageRowStdWrap.dataWrap = <div class="imagerow" 
> style="width:{register:rowwidth}px;"> | </div>
>            noRowsStdWrap.wrap =
>            oneImageStdWrap.dataWrap = <div class="image###CLASSES###" 
> style="width:{register:imagespace}px;"> | </div>
>            imgTagStdWrap.wrap = <div> | </div>
>            editIconsStdWrap.wrap = <div> | </div>
>            caption.wrap = <div class="caption"> | </div>
>        }
>    }
>    renderMethod = dl
> }
> 
> 
> 
> 
> tt_content.textpic.20.text.wrap = <div class="text"> | </div>
> 
> 
> 
> 
> 
> schnabelvieh schrieb:
>> Natascha Oertel schrieb:
>>  
>>> Hallo!
>>>
>>> geht es dir um die klassen oder darum wie die bilder gewrappt sind?
>>> Standardmässig werden Bilder bereits (mit aktuellem cssstyledcontent) 
>>> so ähnlich eingebunden. Die Klassen zu ändern ist ein bisschen 
>>> mühselig, aber geht auch. Oder geht es dir um was anderes?
>>>
>>> Viele Grüsse
>>>
>>> Natascha
>>>     
>>
>> Hallo Natascha,
>>
>> mensch danke für die Antwort. Ich habe eine css - Vorlage:
>>
>> Hier ein Ausschnitt:
>>
>> /* Bild mit Bildunterzeile */
>> dl.bild {
>>      clear: left;
>>      float: right;
>> /*11.10.07 Wenig: hier habe ich aus 20px 2px gemacht*/
>>      margin: 0 0 8px 2px;
>>      padding: 0;
>>      display: inline;
>>      width: 241px;
>> }
>>
>> /* kleines Bild */
>> dl.thumb {
>>      width: 100px;
>> }
>>
>> /* großes Bild */
>> dl.big {
>>      width: 490px;
>> }
>>
>> /*
>> dl.bild dt {
>>      background: #F9F7f7;
>> }*/
>>
>> .is dl.bild img {
>>      margin: 0;
>>      float: none;
>>      display: block;
>> }
>>
>> dl.bild dd {
>>      position: relative;
>>     /*clear: both;*/
>>      margin: 0;
>>      padding: 2px 2px 0px 2px;
>>      font-size: 90%;
>>      color: #7d6666;
>> }
>> dl.bild dd a {
>>      position: absolute;
>>      top: 3px;
>>      right: 3px;
>> }
>>
>> Diese muss ich natürlich berücksichtigen. Das heißt wohl, das es mir 
>> sowohl um das wrappen der bilder als auch um die klassen geht, die 
>> ebenfalls erhalten bleiben müssen. Wenn du mir da weiter helfen 
>> könntest, wäre ich dir sehr dankbar.
>>
>> Gruß Nico
>>
>>
>>
>>
>>
>>  
>>> schnabelvieh schrieb:
>>>    
>>>> Hallo Alle,
>>>>
>>>> ich soll aus einem bestehenden html-prototypen einer Webseite einen 
>>>> Typo3 - Auftritt basteln.
>>>>
>>>> Einiges, wie die Navigation, habe ich schon geschafft, d.h. ich kann 
>>>> neue Seiten anlegen, die entweder in der oberen Navi-Zeile oder in 
>>>> der linken Navi-spalte auftauchen.
>>>>
>>>> Jetzt geht es darum dem Redakteur einige vorgegebenen Elemente zur 
>>>> verfügung zu stellen. Im Prototypen werden Bilder wie folgt 
>>>> eingebunden:
>>>>
>>>> <dl class="bild">
>>>>       <dt><img src="img/ib-hoersaal.jpg" alt="beschreibung" /></dt>
>>>>       <dd class="copyright">&copy; TUB</dd>
>>>> </dl>
>>>>
>>>>
>>>> Nun frage ich mich, wie ich Typo3 dazu animieren kann, html-code zu 
>>>> generieren, der zumindestens deutliche Ähnlichkeiten hat, wenn ich 
>>>> ein Bild einfüge.
>>>>
>>>> Ein Danke im Voraus,
>>>>
>>>> Gruß Schnabelvieh
>>>>
>>>> _______________________________________________
>>>> TYPO3-german mailing list
>>>> TYPO3-german at lists.netfielders.de
>>>> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german
>>>>
>>>>         
>>>     
>>
>> _______________________________________________
>> TYPO3-german mailing list
>> TYPO3-german at lists.netfielders.de
>> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german
>>
>>   
> 


Hallo Natascha,

erstmal danke für deine Hinweise.

Ich versuche es gerade mit der einfachen Anweisung:

tt_content.image.20.imageStdWrap.dataWrap = <dl>|</dl>

Im TSsetup von meiner root-Seite taucht die Anweisung auf. Betrachte ich 
  aber EXT:css_styled_content/static/  im Template Analyser hat sich der 
entsprechende Eintrag leider nicht geändert.

Hast du noch einen Tip ;)

Wäre wunderbar...

Gruß Nico
>