Customize the look of the Person card

We can change elements of the Click for Person Card option and the appearance of the Person card such as text color, font, background color, and so on, by modifying Cascading Style Sheet (CSS) definitions specified in the styles_people.jspf file located in the theme directory.

1. Locate the theme's Cascading Style Sheet (CSS) files. The location can differ between themes, but the CSS files are often in a /css or /styles folder within the theme. For more information on locating the theme's files, see Location of theme resources.

2. Edit the CSS file containing the Person Card styles. The file may differ by theme, but is often either styles_people.jpsf, styles_ibm.jspf, or portalLegacy.css. We can locate the specific file by searching file contents of the CSS folder for one of the CSS style definitions listed in the following table (for example, personMenu), or by loading the portal theme in a Web browser and using Web development tools to inspect the CSS style definitions loaded in the page.

3. Find the following style definitions in the file and modify them as needed:

   Modify this style definition	To do this
   .menu_drop_icon	Change the look and feel of the Click for Person Card option.
   .hyperlink	Change the appearance of the person name hyperlink.
   .photoCard img	Change the style of the image that displays in the business card section of the Person card.
   .businessCard .cardname	Change the style of the name that displays in the business card section.
   .businessCard li	Change the style of other user details that display in the business card section.
   .personMenuActions	Change the style of the actions such as Profile and Send Mais that display on the Person card.
   .personMenu	Change the style of the containethat holds the business card and action items as a single unit.

4. Touch the timestamp on the theme's styles.jsp so that it will be recompiled by the JSP compiler. We can touch the timestamp by editing the file, adding a blank line, and saving the file.

5. Clear the browser's cache and cookies.

6. Call the Person card and verify the changes.

Parent: Collaborative Services API