Providing custom styles for social lists | HCL Digital Experience

The default CSS styles that are used to define the visual appearance of social lists are defined in the wp_social_rendering_85 theme module. You can define your own styles.

About this task

To create your own styles, proceed by the following steps:

Procedure

Create your own custom theme module.
For information about how to create a new theme module, see the topic about Define the module in the HCL Portal product documentation.

Add an extension point to your theme module that adds CSS styles to the HEAD section of the page.

As an example, the wp_social_rendering_85 theme module uses the following extension point:

<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>

Make sure to leave the social_rendering capability ID and the 8.5 capability version number intact as it is, but change the module ID from wp_social_rendering_85 to a value of your choice.

Make a copy of the theme profile provided with the portal, for example profile_basic_content.json. You can use that copied profile on your pages with social lists. If you update the default theme profile provided with the portal, your updates will be overwritten if you install a fix pack or otherwise upgrade your portal.
Add the new module ID from a previous step to your copy of the theme profile.

Copy the default CSS files from the social rendering theme into the new theme module.

These files are in the following directory:

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

The following CSS files are available:

Table 1. CSS files available in the social rendering theme
This table lists the CSS files of the social rendering theme and describes their purpose.
CSS file name	Purpose
sr.css	This file contains the basic social rendering list styles.
sr_wptheme.css	This file contains all styles that depend on `wptheme` sample CSS classes to detect wide, narrow, and thin columns.
sr_rtl.css	This file contains the style overrides for bidirectional languages.
sr_wptheme_rtl.css	This file contains the style overrides for wide, narrow, and thin column definitions in bidirectional languages.
sr_mobile.css	This file contains the style overrides and media queries for mobile devices.

The following table shows the master CSS files. They import the CSS files that are shown in the previous table.

Table 2. Master CSS files of the social rendering theme
This table lists the master CSS files of the social rendering theme and describes their purpose.
CSS file name	Purpose
master_sr.css	This master CSS file links to the basic CSS styles for left-to-right languages.
master_sr_rtl.css	This master CSS file links to the basic CSS styles for bidirectional languages.
master_sr_mobile.css	This master CSS file links to the CSS styles for mobile devices and left-to-right and bidirectional languages.
master_sr_mobile_rtl.css	This master CSS file links to the CSS styles for mobile devices and bidirectional languages

Remove wp_social_rendering_85 from your new theme profile, and add the identifier of your new theme module instead. Repeat this process for all profiles that you are using in your website.
By default, the wp_social_rendering_85 module is part of the following theme profiles:
- profile_wab.json
- profile_search_tag.json
- profile_dojo_deferred.json
- profile_dojo_basic_content.json
- profile_basic_content.json
- profile_deferred.json
In the following code section, replace wp_social_rendering_85 by your_theme_module_id:
```
"wp_ic4_wai_resources",
	"wp_worklight_ext",
"wp_social_rendering_85",
"wp_sametime_proxy"    
      ],
```
Save your changes.
Optional: If you updated your custom theme profile in a separate environment, copy your updated custom profile to the portal.
Optional: If you built your own custom theme and you do not use the wptheme sample CSS classes, make sure to modify the CSS rules in the CSS files sr_wptheme.css and sr_wptheme_rtl.css accordingly.
Optional: If you added more CSS files or renamed existing ones, make sure to update the master_*.css files, as they import one or more of the other sr_*.css files and make them available to the theme module.

Optional: If you add more master_*.css files or change their names, make sure to update the CSS contribution in the plugin.xml file of your theme module.

See the following sample code snippet:

... 
   <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>
...

Optional: If you use social rendering with your own theme, modify the profiles of your custom theme accordingly.
Modify the CSS files that you copied to the new theme module in an earlier step as required. After you modified the CSS files, invalidate browser cache for your updates to take effect. To invalidate your cache, click Theme Analyzer > Utilities > Control Center > Invalidate Cache. Auto invalidation recognizes your changes automatically for WebDAV based themes. No further action is required. For more information, see Utilities.

Results

After you complete this procedure, you can use your own custom styles for your social lists.