Hiérarchie de classe CSS pour les listes sociales

Tableau 1. Les classes CSS d'affichage social et leurs objectifs

Les classes CSS d'affichage social et leurs objectifs

Classe CSS	Objectif
srComponent	Cette classe d'encapsuleur de niveau supérieur est définie autour de l'intégralité de la liste.
srSimple	Cette classe est une classe d'encapsuleur définie autour de l'intégralité de la liste dans une conception simple au sein d'un conteneur srComponent.
srComprehensive	Cette classe est une classe d'encapsuleur définie autour de l'intégralité de la liste dans une conception complète au sein d'un conteneur srComponent.
srTable	Cette classe est définie sur la table contenant les entrées de la liste en tant que ligne d'élément.
srLeftColumn	Cette classe est définie dans la cellule de la table contenant l'icône d'entrée.
srMainColumn	Cette classe est définie dans la cellule de la table contenant le titre d'entrée et les métadonnées.
srCountIcons	Cette classe est définie sur les éléments de la liste pour les icônes Appréciations et Commentaires.
srLikeIcon	Cette classe est définie sur les éléments de la liste pour le nombre d'Appréciations.
srCommentIcon	Cette classe est définie sur les éléments de la liste pour le nombre de Commentaires.
srShareIcon	Cette classe est définie sur les éléments de la liste pour le statut de contrôle d'accès.
srMetaData	Cette classe d'encapsuleur est définie dans le conteneur pour la date et les métadonnées des balises.
srMetaDate	Cette classe est définie sur le conteneur de date de l'entrée.
srMetaTags	Cette classe est définie sur le conteneur de balises de l'entrée.
srSummary	Cette classe est définie sur le conteneur de récapitulatif de l'entrée.
srSocialBar	Cette classe est définie sur le composant Social Bar dans chaque entrée.
srRepliesList	Cette classe est définie sur le conteneur externe de la liste des réponses.
srViewSocialObject	Cette classe est définie sur la partie d'une barre de sociale qui contient le lien Vue.
srReply*	Toutes les classes qui sont utilisées pour mettre en forme les réponses dans la vue de détail des sujets du forum sont précédées par srReply.

En utilisant les classes CSS affichées dans ce tableau, vous pouvez créer des règles spécifiques pour styler chaque aspect d'une entrée de liste sociale individuellement. Dans le fichier de style sr_wptheme.css, vous pouvez trouver un certain nombre de règles CSS qui sont utilisées comme des substitutions pour les définitions CSS de base dans des colonnes étroites et minces. Pour identifier une colonne étroite ou mince dans le thème Portal 8.5 par défaut d'HCL Portal, utilisez des règles CSS comme celle qui suit :

   .wpthemeThin   .lotusui30 .srComponent .srSimple .srEntryTitle,
   .wpthemeNarrow .lotusui30 .srComponent .srSimple .srEntryTitle {
       font-size: 0.63em;
   }

Les colonnes auxquelles la règle CSS wpthemeThin est attribuée sont encore plus petites que les colonnes auxquelles wpthemeNarrow est attribuée. Si vous souhaitez définir des styles distincts pour les colonnes étroites et minces, vous pouvez utiliser les règles CSS suivantes. L'exemple de code suivant définit une taille de police plus petite pour le titre de l'entrée dans les colonnes étroites et une taille de police encore plus petite pour les colonnes minces :

   .wpthemeNarrow .lotusui30 .srComponent .srSimple .srEntryTitle {
       font-size: 0.63em;
   }

   .wpthemeThin .lotusui30 .srComponent .srSimple .srEntryTitle {
       font-size: 0.58em;
   }