Recherche rapide : Avancée

 

Vous êtes ici : Accueil > Snippets > Configuration du backend > personnaliser-cadres

Personnaliser les cadres/frames

Une "frame" ou "Cadre" est un morceau de code HTML qui va entourer votre élément de contenu, c'est à dire le titre et le texte par exemple, si vous sélectionnez une frame pour ce type d'élément.

Par défaut, TYPO3 est livré avec les cadres suivants :

0 : vide
1 : Invisible
5 : Règle avant
6 : Règle après
10 : Indenter
11 : Indenter, 33/66%
12 : Indenter, 66/33%
20 : Cadre 1
21 : Cadre 2
100 : Frame personnalisée

Comment connaitre ces valeurs ? On peut par exemple afficher la source HTML :

On voit dans la source HTML un tableau multidimensionnel :

[tt_content][324][section_frame]

Ici [tt_content][324] indique l'élément de contenu dont l'uid (Unique ID) est le 324 dans la table tt_content.
Ensuite section_frame est un champ de la base de données. Voilà pour l'aspect technique. Je peux ajouter ou
supprimer des enregistrements dans cette liste déroulante depuis le header de mon gabarit.

1. Suppression d'un ou plusieurs cadres

Voici le code à ajouter dans Gabarit > Header > TSconfig

#
# Suppression d'un élément dans la selectbox frame
#

/*
tt_content > section_frame

0 : vide
1 : Invisible
5 : Règle avant
6 : Règle après
10 : Indenter
11 : Indenter, 33/66%
12 : Indenter, 66/33%
20 : Cadre 1
21 : Cadre 2
100 : Frame personnalisée
*/

TCEFORM.tt_content.section_frame {
   removeItems = 1,5,6,10,11,12
}

Vous noterez la chaine removeItems qui contient la liste des éléments par défaut à supprimer.

2. Ajout d'un élément dans la selectbox frame

Voici le code à ajouter dans Gabarit > Header > TSconfig

#
# Ajout d'un élément dans la selectbox frame
#
 
#
TCEFORM.tt_content.section_frame {
   addItems.100 = Introduction
   addItems.101 = Paragraphe
}

On va ajouter des éléments personnalisés. Les noms sont arbitraires et correspondent aux noms qui seront affichés
dans la liste. Ainsi, dans mon cas, j'ai besoin d'avoir une introduction, un certain style de paragraphe ... Je pourrais
passer par un Flexible Content Element depuis TemplaVoila mais ce n'est pas l'objet de cet article :)

3. Mise à jour du gabarit

Vous devrez ajouter le code suivant dans le SETUP de votre gabarit. On doit impérativement retrouver les mêmes entrées
que celle du TSconfig (addItems.xxx = Description).

 

# ***********************
# Frame personnalisée
# ***********************

tt_content.stdWrap.innerWrap.cObject = CASE

tt_content.stdWrap.innerWrap.cObject {

  key.field = section_frame

  100 = TEXT
  100.value = <div class="intro">|</div>

  101 = TEXT
  101.value = <div class="paragraphe">|</div>

}

page.CSS_inlineStyle(
  .intro {margin: 5px; background-color: #181818;}
  .paragraphe {padding-left: 15px;}
)

Les derniers snippets :