Création de portlets et d'éléments de page

Lorsque vous créez des portlets et des éléments de page dans ceux-ci, vous pouvez maintenant définir vos propres substitutions de style comme il convient. Utilisez ces classes CSS de largeur relative pour rendre vos éléments réactifs aux différentes largeurs.

Votre portlet peut être placé dans une colonne de n'importe quelle largeur et s'exécuter sur une unité ayant n'importe quelle taille d'écran. Les styles principaux pour les éléments utilisent des largeurs en pourcentages flexibles plutôt que des largeurs fixes en général pour être réactifs. Pour des colonnes d'une certaine largeur, il peut s'avérer nécessaire d'effectuer d'autres substitutions. Par exemple, si un élément est trop grand pour s'afficher correctement dans une colonne étroite, vous pouvez ajouter display:none pour la masquer entièrement. Vous pouvez également ajouter font-size:1.5em pour les colonnes larges ou font-size:0.8em pour les colonnes étroites. Pour charger une version plus petite d'une image, utilisez background-image:url("myImage_small.jpg") pour les colonnes étroites.

Si vous avez besoin au maximum de cinq niveaux de variations de largeur, il suffit de remplacer les types sémantiques. L'exemple suivant présente trois niveaux de variation :

/* Narrow width columns */
.wpthemeThin .myComponent, .wpthemeNarrow .myComponent {
    ...
}
/* Medium width columns */
.wpthemeMedium .myComponent, {
    ...
}
/* Wide width columns */
.wpthemeWide .myComponent, .wpthemeFull .myComponent {
    ...
}

If you care about more than 5 levels up to 16 levels of variation in width, then you only have to override for the grid types. An example with 8 levels of variation:

/* 1/12th, 1/6th and 1/5th width columns */
.wpthemeCol1of12 .myComponent, .wpthemeCol2of12 .myComponent, .wpthemeCol1of5 .myComponent {
    ...
}
/* 1/4th and 1/3rd width columns */
.wpthemeCol3of12 .myComponent, .wpthemeCol4of12 .myComponent {
    ...
}
/* 2/5ths and 5/12ths width columns */
.wpthemeCol2of5 .myComponent, .wpthemeCol5of12 .myComponent {
    ...
}
/* 1/2 and 7/12ths width columns */
.wpthemeCol6of12 .myComponent, .wpthemeCol7of12 .myComponent {
    ...
}
/* 3/5ths and 2/3rds width columns */
.wpthemeCol3of5 .myComponent, .wpthemeCol8of12 .myComponent {
    ...
}
/* 3/4ths and 4/5ths width columns */
.wpthemeCol9of12 .myComponent, .wpthemeCol4of5 .myComponent {
    ...
}
/* 5/6ths and 11/12ths width columns */
.wpthemeCol10of12 .myComponent, .wpthemeCol11of12 .myComponent {
    ...
}
/* 5/5ths and 12/12ths (full) width columns */
.wpthemeCol5of5 .myComponent, .wpthemeCol12of12 .myComponent {
    ...
}

Vous pouvez remplacer les deux types, si vous le souhaitez, mais cela n'est nécessaire que si vous créez une présentation qui n'utilise pas les deux types sur tous les conteneurs.