thick solid / dicker Rahmen

normal solid / normaler Rahmen

slim solid / dünner Rahmen

slim dashed / dünner und gestrichelter Rahmen

slim dotted / dünner und gepunkteter Rahmen

left slim / linke Abgrenzung

right slim / rechte Abgrenzung

top slim / obere Abgrenzung in Kombination mit inverser Überschrift

Das ist wieder mal so eine kleine Anleitung, die entstanden ist, weil es recht viele Hinweise im Web gibt aber keine Seite einem die Möglichkeit gibt, derartiges auf die Schnelle zusammenzubasteln.

 

Klickt man auf das Auswahlmenü Rahmen, die zweite Optionspalette muss ausgewählt sein, ist es möglich verschieden Rahmentypen auszuwählen. Diese entfalten aber keinerlei Wirkung, da in der CSS normalerweise nicht definiert sind. Um nun eben auf die Schnelle ein paar von mir definierte Rahmen zu erstellen geht man wie folgt vor:

 

- Man fügt in die TSConfig der Rootseite folgende Zeilen ein:

# alte Rahmen entfernen

TCEFORM.tt_content.section_frame {

     removeItems = 1,5,6,10,11,12,20,21

}

# neuen Rahmen hinzufuegen

TCEFORM.tt_content.section_frame {

     addItems.100 = thick solid

     addItems.110 = normal soid

     addItems.120 = slim solid

     addItems.130 = slim dashed

     addItems.140 = slim dotted

     addItems.150 = right slim

     addItems.160 = left slim

     addItems.170 = top slim

}

 

Die TSConfig erreicht man in TYPO3 ver4.2 über Edit Page properties und dann den Reiter Options. Bei der ver3.8 erreicht man dies über Seitentitel bearbeiten und dann das Feld TSconfig: Spezielle TypoScrip-Konfiguration dieser Seite.

 

- Als nächstes wählt man das Template der Rootpage aus und fügt folgende Zeilen ein:

############################################

# Rahmen

tt_content.stdWrap.innerWrap.cObject = CASE

tt_content.stdWrap.innerWrap.cObject {

key.field = section_frame

100 = TEXT

100.value = <div class="thick_solid">|</div>

110 = TEXT

110.value = <div class="normal_solid">|</div>

120 = TEXT

120.value = <div class="slim_solid">|</div>

130 = TEXT

130.value = <div class="slim_dashed">|</div>

140 = TEXT

140.value = <div class="slim_dotted">|</div>

150 = TEXT

150.value = <div class="right_slim">|</div>

160 = TEXT

160.value = <div class="left_slim">|</div>

170 = TEXT

170.value = <div class="top_slim">|</div>

}

page.CSS_inlineStyle(

.thick_solid { border:4px solid;

padding:0.5em;

border-color:black; }

.normal_solid { border:2px solid;

padding:0.5em;

border-color:black; }

.slim_solid { border:1px solid;

padding:0.5em;

border-color:black; }

.slim_dashed { border:1px dashed;

padding:0.5em;

border-color:black; }

.slim_dotted { border:1px dotted;

padding:0.5em;

border-color:black; }

.right_slim { border-right-width:1px;

border-right-style:solid;

border-right-color:black;

padding-right:0.5em;

text-align:justify; }

.left_slim { border-left-width:1px;

border-left-style:solid;

border-left-color:black;

padding-left:0.5em;

text-align:justify; }

.top_slim { border-top-width:1px;

border-top-style:solid;

border-top-color:black;

text-align:justify; }

)

# Ende - Rahmen

############################################

Jetzt hat man funktionsfähige Rahmen zur Verfügung und kann anhand dieses Beispiels neue Rahmen nach eigenen Vorstellungen erstellen. Weitere Hilfestellung zu Eigenkreationen kann folgende Seite geben: http://de.selfhtml.org/css/eigenschaften/rahmen.htm