Typo3 - Rahmen (Frames): Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(10 dazwischenliegende Versionen von 6 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
  
Zum Anpassen kann man den Hebel an verschiedenen Stellen ansetzen.
+
/um Anpassen kann man den Hebel an verschiedenen Stellen ansetzen.
  
 
# Nicht benötigte Einträge entfernen  
 
# Nicht benötigte Einträge entfernen  
Zeile 6: Zeile 6:
 
# Die Bezeichnungen der Auswahlliste zu verändern.
 
# Die Bezeichnungen der Auswahlliste zu verändern.
 
# Die Position des Auswahlfeldes zu beeinflussen.
 
# Die Position des Auswahlfeldes zu beeinflussen.
 +
 +
== Update für TYPO3 > 8 ==
 +
https://wwagner.net/typo3/eigene-rahmen-inhaltselemente-typo3-8-lts/
 +
https://docs.typo3.org/typo3cms/TSconfigReference/PageTsconfig/TceForm.html#additems
 +
 +
Hier kann man wieder mit TypoScript arbeiten, da man wieder die TS Möglichkeit nutzen wollte.
 +
 +
=== Zusätzliche Frames mit Klassen ===
 +
Page TS
 +
<pre>
 +
## Eigene Rahmen fuer Content Elemente
 +
## PageTSconfig
 +
TCEFORM.tt_content.frame_class.addItems {
 +
  greybox = graue Box
 +
  bluebox = blaue Box
 +
}
 +
</pre>
 +
Erlzeugt die Klassen
 +
frame-bluebox
 +
frame-greybox
 +
 +
=== Beispiel 2 ===
 +
Mehr beeinflussen
 +
<pre>
 +
TCEFORM {
 +
  tt_content {
 +
    frame_class {
 +
      types {
 +
        image {
 +
          addItems {
 +
            responsive-image = Responsive Bild Only
 +
          }
 +
        }
 +
      }
 +
    }
 +
  }
 +
}
 +
</pre>
 +
=== Vollständig eigene Rahmen ===
 +
 +
Rahmen-Backend-Feld
 +
 +
PageTS
 +
<pre>
 +
# Frame Feld
 +
TCEFORM.tt_content {
 +
        layout{
 +
            altLabels{
 +
                0 = Normal
 +
                1 = Rahmen 2
 +
            }
 +
            removeItems = 3,4,5,6,7,8,9,10
 +
        }
 +
    }
 +
</pre>
 +
 +
Markup TypoScript Setup
 +
 +
<pre>
 +
tt_content.stdWrap.innerWrap.cObject = CASE
 +
  tt_content.stdWrap.innerWrap.cObject {
 +
    key.field = layout
 +
      1 = TEXT       
 +
      1.value = <div class="csc-default meineklasse1">|</div>
 +
      2 = TEXT
 +
      2.value = <div class="csc-default meineklasse2">|</div>
 +
      3 = TEXT
 +
      3.value = <div class="csc-default meineklasse3">|</div>
 +
    }
 +
 +
 +
</pre>
 +
 +
== Update für TYPO3 >= 7 ==
 +
Hier ist css_styled_content rausgeflogen daher konnte man nur Fluid nehmen
 +
== Update für TYPO3 >= 4.7 ==
 +
Quelle: http://www.sitevisions.de/typo3-cms/eigene-rahmen-in-typo3-ab-4-7 (2016-08)
 +
css_styled_content hat sich etwas verändert daher sind die Labels an anderer Stelle:
 +
<syntaxhighlight lang="typoscript">
 +
tt_content.stdWrap.innerWrap.cObject {
 +
  100 =< tt_content.stdWrap.innerWrap.cObject.default
 +
  100.15.value = rahmen1
 +
}
 +
</syntaxhighlight>
 +
müsst Ihr ab TYPO3 Version 4.7 folgende Schreibweise nutzen:
 +
<syntaxhighlight lang="typoscript">
 +
tt_content.stdWrap.innerWrap.cObject {
 +
  100 =< tt_content.stdWrap.innerWrap.cObject.default
 +
  100.20.10.value = rahmen1
 +
}
 +
</syntaxhighlight>
 +
== Update für TYPO3 >= 4.3 ==
 +
'''Beispiel 4'''
 +
Änderungen in TYPO3 > 4.3
 +
 +
In neuen Versionen wurden einige Standard TypoScript Konfigurationen verändert.
 +
 +
Neues Objekt anlegen wie unten (TSConfig)
 +
<pre>
 +
TCEFORM.tt_content.section_frame{
 +
#neue Rahmen hinzufügen
 +
#die Zahl ist beliebig, darf aber nur ein Mal verwendet werden
 +
#Namen sollten sprechend sein
 +
addItems.100 = Galerie
 +
}
 +
</pre>
 +
Hier läßt sich eine Klasse z.B. so ändern:
 +
<pre>
 +
tt_content.stdWrap.innerWrap.cObject {
 +
100 = <tt_content.stdWrap.innerWrap.cObject.default
 +
100.15.value=galerie
 +
}
 +
</pre>
  
 
== Bisher vorhandene Rahmen Einstellungen entfernen ==
 
== Bisher vorhandene Rahmen Einstellungen entfernen ==
'''Definitionen der verschiedenen Layouts im Seiten TSconfig:'''
+
Definitionen der verschiedenen '''Layouts im Seiten TSconfig:'''
  
 
  TCEFORM.tt_content.section_frame.removeItems = 5,6,10,11,12,20,21
 
  TCEFORM.tt_content.section_frame.removeItems = 5,6,10,11,12,20,21
  
'''Bestehende Einstellung umbenennen:'''
+
Bestehende Namen '''umbenennen:'''
  
 
  TCEFORM.tt_content.section_frame.altLabels.1 = Layout1
 
  TCEFORM.tt_content.section_frame.altLabels.1 = Layout1
  
'''Eigene Einstellungen hinzufügen:'''
+
Eigene Namen '''hinzufügen:'''
  
 
  TCEFORM.tt_content.section_frame.addItems.2 = Layout2
 
  TCEFORM.tt_content.section_frame.addItems.2 = Layout2
Zeile 22: Zeile 135:
  
 
== Rendering der Rahmen (Frames) ändern ==
 
== Rendering der Rahmen (Frames) ändern ==
 +
 +
Hinweis: wenn mit neueren Versionen von TYPO3 oder mit csc gearbeitet wird muß man die Renderobjekte an anderer Stelle suchen (siehe Beispiel 3). Der Objektbrowser hilft hier weiter.
  
 
'''Beispiel 1'''
 
'''Beispiel 1'''
Zeile 47: Zeile 162:
 
  tt_content.stdWrap.innerWrap.cObject.1.value = xxx|yyy
 
  tt_content.stdWrap.innerWrap.cObject.1.value = xxx|yyy
  
 +
'''Beispiel 3'''
 +
Beispiel mit CSS Styled Content
 +
<pre>
 +
tt_content.stdWrap{
 +
  innerWrap.cObject{
 +
      20.30.value >
 +
      20.30.value = ><div class="top"></div> <div class="content">|</div> <div class="bot"></div> </div>
 +
  }
 +
}
 +
</pre>
 +
Hier werden 3 Divs eingesetzt um z.B. Boxen mit Ober und Unterteil zu erzeugen
 
'''Die Nummern der Standard-Objekte'''
 
'''Die Nummern der Standard-Objekte'''
1 - invisible
+
1 - invisible
5 - ruler before
+
5 - ruler before
6 - ruler after
+
6 - ruler after
10 - frame intend
+
10 - frame intend
11 - 3366
+
11 - 3366
12 - 6633
+
12 - 6633
20 - frame1
+
20 - frame1
21 - frame2
+
21 - frame2
 +
 
 +
 
  
 
== Bezeichnungen der Rahmen im Backend ==
 
== Bezeichnungen der Rahmen im Backend ==
Zeile 80: Zeile 208:
 
   
 
   
 
Weitere Infos zum Thema Backend unter [[Typo3 - Backend anpassen]]
 
Weitere Infos zum Thema Backend unter [[Typo3 - Backend anpassen]]
 +
 +
== Backend Layout und Rahmen gemeinsam verwenden ==
 +
[[TYPO3 - Backend Layout und Rahmen gemeinsam verwenden]]

Aktuelle Version vom 29. Mai 2019, 20:15 Uhr

/um Anpassen kann man den Hebel an verschiedenen Stellen ansetzen.

  1. Nicht benötigte Einträge entfernen
  2. Aussehen (Rendering)der Rahmen zu verändern.
  3. Die Bezeichnungen der Auswahlliste zu verändern.
  4. Die Position des Auswahlfeldes zu beeinflussen.

Update für TYPO3 > 8[Bearbeiten]

https://wwagner.net/typo3/eigene-rahmen-inhaltselemente-typo3-8-lts/
https://docs.typo3.org/typo3cms/TSconfigReference/PageTsconfig/TceForm.html#additems

Hier kann man wieder mit TypoScript arbeiten, da man wieder die TS Möglichkeit nutzen wollte.

Zusätzliche Frames mit Klassen[Bearbeiten]

Page TS

## Eigene Rahmen fuer Content Elemente
## PageTSconfig
TCEFORM.tt_content.frame_class.addItems {
  greybox = graue Box
  bluebox = blaue Box
}

Erlzeugt die Klassen

frame-bluebox
frame-greybox

Beispiel 2[Bearbeiten]

Mehr beeinflussen

TCEFORM {
  tt_content {
    frame_class {
      types {
        image {
          addItems {
            responsive-image = Responsive Bild Only
          }
        }
      }
    }
  }
}

Vollständig eigene Rahmen[Bearbeiten]

Rahmen-Backend-Feld

PageTS

# Frame Feld
TCEFORM.tt_content {
        layout{
            altLabels{
                0 = Normal
                1 = Rahmen 2
            }
            removeItems = 3,4,5,6,7,8,9,10
        }
    }

Markup TypoScript Setup

tt_content.stdWrap.innerWrap.cObject = CASE
  tt_content.stdWrap.innerWrap.cObject {
    key.field = layout
      1 = TEXT        
      1.value = <div class="csc-default meineklasse1">|</div>
      2 = TEXT
      2.value = <div class="csc-default meineklasse2">|</div>
      3 = TEXT
      3.value = <div class="csc-default meineklasse3">|</div>
    }

 

Update für TYPO3 >= 7[Bearbeiten]

Hier ist css_styled_content rausgeflogen daher konnte man nur Fluid nehmen

Update für TYPO3 >= 4.7[Bearbeiten]

Quelle: http://www.sitevisions.de/typo3-cms/eigene-rahmen-in-typo3-ab-4-7 (2016-08) css_styled_content hat sich etwas verändert daher sind die Labels an anderer Stelle:

tt_content.stdWrap.innerWrap.cObject {
  100 =< tt_content.stdWrap.innerWrap.cObject.default
  100.15.value = rahmen1
}

müsst Ihr ab TYPO3 Version 4.7 folgende Schreibweise nutzen:

tt_content.stdWrap.innerWrap.cObject {
  100 =< tt_content.stdWrap.innerWrap.cObject.default
  100.20.10.value = rahmen1
}

Update für TYPO3 >= 4.3[Bearbeiten]

Beispiel 4 Änderungen in TYPO3 > 4.3

In neuen Versionen wurden einige Standard TypoScript Konfigurationen verändert.

Neues Objekt anlegen wie unten (TSConfig)

TCEFORM.tt_content.section_frame{
 #neue Rahmen hinzufügen
 #die Zahl ist beliebig, darf aber nur ein Mal verwendet werden
 #Namen sollten sprechend sein
 addItems.100 = Galerie
 }

Hier läßt sich eine Klasse z.B. so ändern:

tt_content.stdWrap.innerWrap.cObject {
 100 = <tt_content.stdWrap.innerWrap.cObject.default
 100.15.value=galerie
}

Bisher vorhandene Rahmen Einstellungen entfernen[Bearbeiten]

Definitionen der verschiedenen Layouts im Seiten TSconfig:

TCEFORM.tt_content.section_frame.removeItems = 5,6,10,11,12,20,21

Bestehende Namen umbenennen:

TCEFORM.tt_content.section_frame.altLabels.1 = Layout1

Eigene Namen hinzufügen:

TCEFORM.tt_content.section_frame.addItems.2 = Layout2
TCEFORM.tt_content.section_frame.addItems.3 = Layout3

Rendering der Rahmen (Frames) ändern[Bearbeiten]

Hinweis: wenn mit neueren Versionen von TYPO3 oder mit csc gearbeitet wird muß man die Renderobjekte an anderer Stelle suchen (siehe Beispiel 3). Der Objektbrowser hilft hier weiter.

Beispiel 1

tt_content.stdWrap{
   innerWrap.cObject{
      20.value >
      20.value = <div class="frame1">|</div>
      21.value >
      21.value = <div class="frame2">|</div>
   }
}

Dies ändert die Rahmenvorlagen Frame1 und Frame2 (Rahmen1 und Rahmen2)

Mit dem Object Browser kommt man schnell den anderen Typen auf die Spur.

Beispiel 2

Hier wird zum Beispiel das erste Layout von "xxx" und "yyy" umschlossen. Her wäre natürlich ein DIV oder ähnliches möglich.

tt_content.stdWrap.innerWrap.cObject.1 = TEXT
tt_content.stdWrap.innerWrap.cObject.1.value = xxx|yyy

Beispiel 3 Beispiel mit CSS Styled Content

tt_content.stdWrap{
   innerWrap.cObject{
      20.30.value >
      20.30.value = ><div class="top"></div> <div class="content">|</div> <div class="bot"></div> </div>
   }
}

Hier werden 3 Divs eingesetzt um z.B. Boxen mit Ober und Unterteil zu erzeugen Die Nummern der Standard-Objekte

1 - invisible
5 - ruler before
6 - ruler after
10 - frame intend
11 - 3366
12 - 6633
20 - frame1
21 - frame2


Bezeichnungen der Rahmen im Backend[Bearbeiten]

Diese lassen sich nicht wie die Headers in der Benutzerkonfiguration im TCE Feld einstellen.

Eine Möglichkeit ist das Sprachfile direkt anzupassen.

Das relevante Sprachfile liegt unter: /typo3conf/ext/csh_de/cms/de.locallang_ttc.xml

Update: geht doch siehe hier Typo3 - TSConfig

Anordnung des Auswahlfelds anpassen[Bearbeiten]

In ext_tables.php einer beliebiegen (oder neuen) Extension

section_frame nach vorne schieben, damit das Layout links erscheint und nicht ganz hinten rechts.

Einfach in die Datei ext_tables.php einer Extension folgendes eintragen.

$TCA['tt_content']['palettes']['4']['showitem']='section_frame, sys_language_uid, colPos, spaceBefore, spaceAfter, sectionIndex, linkToTop';

Natürlich können Sie hier auch eine andere Reihenfolge festlegen oder bei der Gelegenheit gleich andere Felder auch noch verschieben.

Weitere Infos zum Thema Backend unter Typo3 - Backend anpassen

Backend Layout und Rahmen gemeinsam verwenden[Bearbeiten]

TYPO3 - Backend Layout und Rahmen gemeinsam verwenden