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:
Make sure to leave the<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>
social_rendering
capability ID and the8.5
capability version number intact as it is, but change the module ID fromwp_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:The following table shows the master CSS files. They import the CSS files that are shown in the previous table.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. 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, thewp_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
wp_social_rendering_85
byyour_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 Auto invalidation recognizes your changes automatically for WebDAV based themes. No further action is required. For more information, see Utilities. .