Pages that render the sample items must use a theme profile that includes the wp_social_rendering
theme module or another module that contains the same CSS class definitions. An example of such a theme profile is the full theme profile that is installed by default.
theme module includes a single CSS file that is named sr.css
. This style sheet is loaded from the following directory location: PortalServer_root/theme/wp.theme.modules/webapp/installedApps/ThemeModules.ear/ThemeModules.war/modules/sr/css/sr.css
theme module defines the capability with the name social_rendering
and the version 8.0
. No prerequisites are required to use this theme module.
Style sheet note:
The lists of social objects use CSS styles that render differently, depending on the layout container that contains the social list web content viewer. Different classification CSS classes are assigned to these layout containers. As a result, the styles change when a social list web content viewer is moved from the center column into a narrower side column or vice versa. Furthermore, the styles are responsive to screen width and screen orientation. This responsiveness is achieved by using HTML5 and CSS3 media queries.
Providing custom styles for social listsParent topic: Customizing the visual design of social lists
Reference: ConfigEngine tasks for adding and removing theme modules
The default CSS styles that are used to define the visual appearance of social lists are defined in the wp_social_rendering
theme module. You can define your own styles.
CSS class hierarchy for social lists
To define its visual appearance, the default markup for social lists uses several CSS classes. They are defined in the wp_social_rendering
theme module. Learn about the purpose of the most important CSS classes.
Using media queries to target mobile devices
The default social list CSS styles use CSS3 media queries to target specific mobile devices and implement responsive web design. Learn more about media queries.