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

[Natascha Oertel]

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
>
>   


-- 
__________________________

Natascha Oertel

www.noe-x.com