Présentations

Vous pouvez modifier les présentations existantes ou vous pouvez créer une nouvelle présentation en copiant et en modifiant une présentation existante.

Les modèles de présentation contrôlent la position du contenu sur une page. Le thème simple inclut quatre présentations :
1 colonne
La totalité du contenu apparaît dans une colonne.
2 colonnes - à gauche
La page comprend deux colonnes, la colonne de gauche étant plus large.
2 colonnes - à droite
La page comprend deux colonnes, la colonne de droite étant plus large.
Présentation inégale à 2 colonnes et colonne en haut
Une colonne recouvre le début de la page et deux colonnes remplissent le reste de la page, la colonne de gauche étant plus large.

Le balisage des modèles de présentation est défini dans le dossier fs-type1/themes/themename/layout-templates du thème, lequel contient un dossier pour chaque modèle de présentation. Chaque dossier contient un fichier nommé layout.html qui représente le balisage, et un fichier nommé icon.png qui illustre la présentation.

Les modèles de présentation utilisent une feuille de style en cascade de grille qui est définie dans un modèle situé dans le fichier fs-type1/themes/themename/modules/st_layoutGrid/head/layout-grid.css du thème. Avant de pouvoir utiliser cette feuille de style en cascade de grille, vous devez inclure le module st_layoutGrid dans le profil. Ce module rend la présentation tellement fluide que lorsque vous réduisez la taille de la fenêtre de navigateur, les colonnes se réorganisent automatiquement pour occuper la nouvelle largeur de la fenêtre.

Vous pouvez modifier les présentations existantes ou vous pouvez créer une nouvelle présentation en copiant et en modifiant une présentation existante. Certains éléments sont requis pour que les présentations puissent fonctionner correctement. Ces éléments incluent notamment la classe component-container, l'attribut name et l'une des classes Dnd si vous souhaitez prendre en charge la fonction de glisser-déposer.

Remarque : Si vous ajoutez une nouvelle présentation ou modifiez le titre d'une présentation existante, mettez à jour fs-type1/themes/themename/system/layouts.json avec les nouvelles informations de présentation de sorte que la présentation apparaisse dans la barre d'outils.
La liste suivante décrit les valeurs de ces éléments requis.
class="component-container"
L'analyseur de page statique reconnaît ce microformat afin de définir des conteneurs dans le modèle de présentation de page qui peut contenir les composants. Ces composants peuvent être des portlets ou des widgets.
name="ibmMainContainer"
L'attribut name d'un conteneur de composants identifie ce conteneur de façon unique pour la page. L'analyseur de page statique utilise le même nom pour établir une corrélation entre les conteneurs lorsqu'il met à jour la définition de page. Prenez soin d'utiliser des noms cohérents sur les modèles de présentation afin de conserver le contenu de votre conteneur en dépit des changements de modèles. Il doit toujours exister un conteneur nommé ibmMainContainer pour le contenu principal de la page.
name="ibmHiddenWidgets"
Lorsque vous créez votre propre présentation, vous devez toujours inclure au début de la page un conteneur nommé ibmHiddenWidgets.
name="headline"
Si vous utilisez d'autres conteneurs en plus de ibmMainContainer et ibmHiddenWidgets, utilisez headline pour un en-tête ou une bannière sur la page de manière à pouvoir passer tout en douceur de vos propres présentations aux présentations par défaut.
name="secondary"
Utilisez secondary pour le contenu secondaire par rapport au contenu principal, par exemple, une barre d'options latérale.
name="tertiary"
Utilisez tertiary pour le contenu qui prend en charge le contenu secondary.
name="additional"
Utilisez additional pour le contenu qui prend en charge le contenu tertiary.
name="footer"
Utilisez footer pour un objet situé à la fin de la page.
class="ibmDndColumn" ou class="ibmDndRow"
Cette classe est requise pour la prise en charge du glisser-déposer côté client. Marquez le conteneur de composants avec l'une de ces classes.

En savoir plus sur Utilisation des modèles de présentation. Notez que les informations disponibles via ce lien ne s'appliquent pas toutes au thème simple.