Styles personnalisés pour les listes sociales

Les styles CSS par défaut qui sont utilisés pour définir la présentation visuelle des listes sociales sont définis dans le module de thème wp_social_rendering_85. Vous pouvez définir vos propres styles.

Pourquoi et quand exécuter cette tâche

Pour créer vos propres styles, procédez comme suit :

Procédure

Créez votre propre module de thème personnalisé.
Pour plus d'informations sur la création d'un nouveau module de thème, reportez-vous à la rubrique Définition du module dans la documentation produit HCL Portal.

Ajoutez un point d'extension vers votre module de thème qui ajoute des styles CSS à la section HEAD de la page.

A titre d'exemple, le module de thème wp_social_rendering_85 utilise le point d'extension suivant :

<extension point="com.ibm.portal.resourceaggregator.module" id="social_rendering_head" >
   <module id="wp_social_rendering_85">
      <capability id="social_rendering_85" value="8.5"/>
      <contribution type="head">
         <sub-contribution type="css">
            <uri value="res:{rep=WP GlobalThemeConfig;key=resources.modules.ibm.contextRoot}/modules/sr/v8.5/css/master_sr.css" />
            <uri type="rtl" 
                 value="res:{rep=WP GlobalThemeConfig;key=resources.modules.ibm.contextRoot}/modules/sr/v8.5/css/master_sr_rtl.css"/>
            <uri deviceClass="smartphone" 
                 value="res:{rep=WP GlobalThemeConfig;key=resources.modules.ibm.contextRoot}/modules/sr/v8.5/css/master_sr_mobile.css"/>
            <uri deviceClass="tablet" 
                 value="res:{rep=WP GlobalThemeConfig;key=resources.modules.ibm.contextRoot}/modules/sr/v8.5/css/master_sr_mobile.css"/>
         </sub-contribution>
      </contribution>
   </module>
</extension>

Veillez à laisser l'ID de capacité social_rendering et le numéro de version de capacité 8.5 inchangés, mais remplacez l'ID de module à partir de wp_social_rendering_85 par une valeur de votre choix.

Générez une copie du profil de thème fourni avec le portail, profile_basic_content.json, par exemple. Vous pouvez utiliser ce profil copié sur vos pages avec des listes sociales. Si vous mettez à jour le profil de thème par défaut fourni avec le portail, vos mises à jour sont remplacées si vous installez un groupe de correctifs ou mettez à niveau votre portail.
Ajoutez l'ID du nouveau module, obtenu à une étape précédente, à votre copie du profil de thème.

Copiez les fichiers CSS par défaut depuis le thème de rendu social dans le nouveau module de thème.

Ces fichiers se trouvent dans le répertoire suivant :

PortalServer_rootPortalServer_root/theme/wp.theme.modules/webapp/installedApps/ThemeModules.ear/ThemeModules.war/modules/sr/v8.5/css

Les fichiers CSS suivants sont disponibles :

Tableau 1. Fichiers CSS disponibles dans le thème de rendu social
Ce tableau répertorie les fichiers CSS du thème de rendu social et décrit leurs objectifs.
Nom de fichier CSS	Objectif
sr.css	Ce fichier contient les styles de liste de rendu social de base.
sr_wptheme.css	Ce fichier contient tous les styles qui dépendent des exemples de classe CSS`wptheme` pour détecter des colonnes larges, étroites et fines.
sr_rtl.css	Ce fichier contient les substitutions de style pour les langues bidirectionnelles.
sr_wptheme_rtl.css	Ce fichier contient les substitutions de style pour les définitions de colonnes larges, étroites et fines dans les langues bidirectionnelles.
sr_mobile.css	Ce fichier contient les substitutions de style et les requêtes média pour les périphériques mobiles.

Le tableau suivant montre les fichiers CSS principaux. Ils importent les fichiers CSS qui sont affichés dans le tableau précédent.

Tableau 2. Fichiers CSS principaux du thème de rendu social
Ce tableau recense les fichiers CSS principaux du thème de rendu social et décrit leur objectif.
Nom de fichier CSS	Objectif
master_sr.css	Ce fichier CSS principal est relié aux styles CSS de base pour les langues de gauche à droite.
master_sr_rtl.css	Ce fichier CSS principal est relié aux styles CSS de base pour les langues bidirectionnelles.
master_sr_mobile.css	Ce fichier CSS principal est relié aux styles CSS pour unités mobiles et pour les langues de gauche à droite et bidirectionnelles.
master_sr_mobile_rtl.css	Ce fichier CSS principal est relié aux styles CSS pour unités mobiles et pour les langues bidirectionnelles.

Supprimez wp_social_rendering_85 de votre nouveau profil de thème et ajoutez l'identificateur de votre nouveau module de thème. Répétez ce processus pour tous les profils que vous utilisez dans votre site Web.
Par défaut, le module wp_social_rendering_85 fait partie des profils de thème suivants :
- profile_wab.json
- profile_search_tag.json
- profile_dojo_deferred.json
- profile_dojo_basic_content.json
- profile_basic_content.json
- profile_deferred.json
Dans la section de code suivante, remplacez wp_social_rendering_85 par your_theme_module_id :
```
"wp_ic4_wai_resources",
	"wp_worklight_ext",
"wp_social_rendering_85",
"wp_sametime_proxy"    
      ],
```
Sauvegardez vos modifications.
Facultatif : Si vous avez mis à jour votre profil de thème personnalisé dans un environnement distinct, copiez votre profil personnalisé mis à jour vers le portail.
Facultatif : Si vous avez créé votre propre thème personnalisé et que vous n'utilisez pas les exemples de classes CSS wptheme, veillez à modifier les règles CSS dans les fichiers CSS sr_wptheme.css et sr_wptheme_rtl.css en conséquence.
Facultatif : Si vous avez ajouté plusieurs fichiers CSS ou renommé les fichiers existants, veillez à mettre à jour les fichiers master_*.css, car ils importent un ou plusieurs autres fichiers sr_*.css et les rendent disponibles pour le module de thème.

Facultatif : Si vous ajoutez plusieurs fichiers master_*.css ou modifiez leur nom, veillez à mettre à jour la contribution CSS dans le fichier plugin.xml de votre module de thème.

Voir l'exemple de fragment de code suivant :

... 
   <sub-contribution type="css">
      <uri value="res:{rep=WP GlobalThemeConfig;key=resources.modules.ibm.contextRoot}/modules/sr/v8.5/css/master_sr.css" />
      <uri type="rtl" 
           value="res:{rep=WP GlobalThemeConfig;key=resources.modules.ibm.contextRoot}/modules/sr/v8.5/css/master_sr_rtl.css"/>
      <uri deviceClass="smartphone" 
           value="res:{rep=WP GlobalThemeConfig;key=resources.modules.ibm.contextRoot}/modules/sr/v8.5/css/master_sr_mobile.css"/>
      <uri deviceClass="tablet" 
           value="res:{rep=WP GlobalThemeConfig;key=resources.modules.ibm.contextRoot}/modules/sr/v8.5/css/master_sr_mobile.css"/>
      <uri ...additional contributions go here.../>
   </sub-contribution>
...

Facultatif : Si vous utilisez le rendu social avec votre propre thème, modifiez les profils de votre thème personnalisé en conséquence.
Modifiez les fichiers CSS que vous avez copiés sur le nouveau module de thème lors d'une précédente étape. Après avoir modifié les fichiers CSS, invalidez la mémoire cache du navigateur pour que vos mises à jour prennent effet. To invalidate your cache, click Theme Analyzer > Utilities > Control Center > Invalidate Cache. L'invalidation automatique reconnaît automatiquement les modifications apportées aux thèmes basés sur WebDAV. Aucune autre action n'est requise. Pour plus d'informations, voir Utilitaires.

Résultats

Après avoir réalisé cette procédure, vous pouvez utiliser vos propres styles personnalisés pour vos listes sociales.