Reference: CSS Classes

The output produced by the PeopleZen User Profiles Web Part is decorated with the CSS class names detailed below, allowing for full customizability of its visual appearance. These elements are pre-styled in /_layouts/roxority_PeopleZen/roxority_PeopleZen.css.

To customize the appearance of the PeopleZen User Profiles Web Part, do not modify the /_layouts/roxority_PeopleZen/roxority_PeopleZen.css file in your SharePoint server file system: your modifications would get lost when deploying product updates in the future. Instead, place your modifications in a separate CSS file and embed it in your Web Part Page, Master Page or Page Layout.

See our blog article Introduction to PeopleZen CSS Customizations for an example of how to do so.

• div.rox-rollup div.rox-rollupitems — the entire surrounding area of the PeopleZen User Profiles Web Part output
  • div.rox-rollup-paging — contains paging information as well as the Next and/or Previous links
  • div.rox-rollup-switcher — if ad-hoc end-user view switching is enabled, contains the switching links
  • span.rox-pz-zero — the There are no User Profiles to show in this view message
  • div.rox-tabstrip — contains all quick-filter tabs (if enabled)
    • div.rox-tabprop — if ad-hoc end-user switching of the quick-filter tabbing property is enabled, contains the drop-down for doing so
    • div.rox-tabstrip-fill — filler block element for the remaining area after the last one of the quick-filter tabs
  • div.rox-loader — shows a progress bar or spinner animation while information is refreshed or retrieved in the User Profiles Web Part (via AJAX)
  • table.rox-rollupitems — in List View only: the surrounding table of the user profiles list view
  • div.rox-rollupitems-all — in Tiles View only: the surrounding area of all user profile tiles
  • div.rox-rollupitem — the surrounding area of a single user profile listing in Tiles view
    • div.rox-rollupitem-picture — contains the user profile picture, linked to the user profile
    • div.rox-rollupitem-fullname — contains the user name, linked to the user profile (Tiles view only)
    • div.rox-rollup-item, div.rox-rollupitem-property-name — contains a user profile property (Tiles view only)
  • span.rox-rollgroup — if grouping is enabled, contains the group value
    • span.rox-rollgroupprefix — if grouping is enabled, contains the group name
    • span.rox-rollgroupcount — if grouping is enabled, contains the group item count
    • a.rox-rollgroupdirlink — if grouping is enabled, represents the up/down arrow for re-sorting the group