FAQ content

Guides: How to use profile boxes

In this article

Each user has their own profile box, which they can customize to display details like their name, profile image, and contact info. This not only lets patrons know who created a guide, but also how to get in touch with them. Guides can include multiple profile boxes, too, which is useful if you are collaborating on a guide.

Example of a profile box


Adding a profile box

  1. While editing your guide, click on the page you want to edit in your guide's navigation menu (i.e. tabs or side-navigation).
  2. Click the  Add Box link at the bottom of the column where you want the box to go. For example, to add a box to Column 2, click on  Add Box - Column 2.

Clicking the Add Box link

  1. In the Add New Box window, enter the title for your box in the Box Name field. Or, leave this field empty if you would like it to display the box title from the user's profile settings.
    • This will display in the box's heading.
    • If displaying the box-level navigation in a side-navigation guide, it will also display in the list of boxes for the current page.
Please note: Only limited HTML tags are allowed in a box's title. These include: <strong>, <b>, <em>, and <i> (as used in Font Awesome icons). For best results, however, we recommend using CSS code to style box titles.
  1. Select Profile from the Type dropdown.
  2. From the Position dropdown, select where in the column the new box should be added. You can add it to the top, bottom, or following any box in the column. (Don't worry: you can always reorder the boxes later.)
  3. If you would like to display the box without any borders, padding, or heading on the public view of your guide, select the Floating Box checkbox.
    • While editing your guide, the box will still display with borders and a heading. The only difference is that you'll see the Floating Box () icon appear in the heading.
    • However, when previewing or viewing the public view of your guide, the borders and heading will be hidden.
  4. If you would like to hide this box from public view until its ready, select the Draft Mode checkbox.
    • While enabled, you can only view the box while editing the guide. It will not be visible on the public guide, or while previewing the guide.
    • Note: if your system has the Publishing Workflow (CMS-only) enabled, only a designated reviewer can take a hidden box out of draft mode.
  5. Click the Save button.

Adding a new profile box

Can I reuse or copy a profile box?

When reusing existing boxes on a page, you may notice that you cannot select Profile boxes to reuse or copy. That's because, unlike other box types, Profile boxes are inherently mapped. When you add a user's profile box to a page, it will remain updated any time the user updates their profile box's content. As a result, there's no need to map or copy a profile box -- simply add a new profile box to a page and it'll stay up-to-date automatically.


Choose which profile(s) a box displays

When you add a new profile box to a guide, it will display the guide owner's profile by default. However, you can customize this to display another user's profile box, or you can even randomize the box to display a different profile each time the page loads.

  1. While editing your guide, click on the page containing your profile box in the guide's navigation menu (i.e. tabs or side-navigation).
  2. In the gallery box's heading, click on the Edit Profile Selection () icon.

Clicking the Edit Profile Selection icon

  1. In the Edit Profile Selection window, select the profile you want to display from the dropdown.
    • To display the current guide owner's profile (default), select Display the guide owner's profile.
    • To display any random profile for any account in your system, select Display a random profile.
    • To display a randomly selected guide owner's profile, select Display a random guide owner.
    • Or, select the profile for a specific user you want to display.
  2. Click the Close button.

Selecting a profile to display 


Advanced: Customize the CSS of your profile boxes

One way to customize the appearance of your guides is by customizing the styles and colors of your content boxes. Want border-less boxes? Squared corners instead of rounded? Blue box headers instead of gray? These are just a few things you can do in your guide's Tab & Box Options. Tab & Box options can be set at three levels:

  • Admin users can customize the default Tab & Box Options for all guides in your system. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Group admins can customize the default Tab & Box Options for all guides in their group. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Guide owners and editors (and all admins) can customize the Tab & Box Options for individual guides. Admins have the ability to force each guide to use the same tab and box styles. If that's the case, then a guide's Tab & Box Options will be disabled.

CSS map for a profile box

Diagram of a profile box


Pointer - section 1

The entire box:

.s-lib-box: use this class to target all boxes in your guides.

Tip: Remember, if you want to change the border color or width, you can do this in your look & feel settings!

Default CSS:

.s-lib-box {
  border-color: #cccccc;
  border-width: 1px;
  box-shadow: 0 8px 6px -6px #AAAAAA;
  border-radius: 4px 4px 4px 4px;
  background-color: #fff;
}

Pointer - section 2

The box header and title:

.s-lib-box .s-lib-box-title: use these classes to target your box headings.

Tip #1: Remember, if you want to change the header background color or the font color, you can do this in your look & feel settings!

Tip #2: If you decide to hide your box titles, we suggest that you check the "Do not include this code on guide edit page" check box on your Custom JS / CSS page.

Default CSS:

.s-lib-box .s-lib-box-title {
  background-color: #f1f1f1;
  background-image: none;
  color: #888;
  border-bottom: 1px solid #cccccc;
  border-radius: 3px 3px 0px 0px;
}

Pointer - section 3

Profile box area:

.s-lib-box-content .s-lib-profile-container : use this combination of classes to target the container for all profile boxes.

.s-lib-profile-div: every piece of the profile uses this class name.

.s-lib-profile-center: this class is used by the profile image, the profile name, and the Email Me button.

Default CSS:

.s-lib-box-content {
  padding: 10px;
}

.s-lib-profile-div {
  margin-bottom: 15px;
}

.s-lib-profile-center {
  text-align: center;
}

Pointer - section 4

Profile image:

.s-lib-profile img: this code will target the profile image.

Default CSS:

.s-lib-profile-image img {
  background-color: #FFF;
  border: 1px solid #A9A9A9;
  box-shadow: 3px 3px 4px #AAA;
  padding: 4px;
  max-width: 95%;
}

Pointer - section 5

Profile name:

.s-lib-profile-name: this class this class targets the name associated with the profile.

Default CSS:

.s-lib-profile-name { 
  font-weight: 700;
  font-size: 1.1em;
}

Pointer - section 6

Email Me button:

.label-info: this class controls the background color of the "Email Me" button.

.label: this class controls every other aspect of the button (font, etc.).

Tip: with CSS, it's best to be specific as possible. If you want to change the look of the Email Me button, we recommend you use .s-lib-profile-email .label and/or .s-lib-profile-email .label-info.

Default CSS:

.label-info {
  background-color: #5bc0de;
}
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

Pointer - section 7

Contact Info:

.s-lib-profile-contact: this class targets the whole contact info section.

Want to target specific parts of the contact information?

  • .s-lib-profile-contact > strong: target the "Contact:" heading.
  • .s-lib-profile-contact > div: target the text below "Contact:" heading.

Default CSS:

.s-lib-profile-contact

(No default CSS)

Pointer - section 8

Social networking info:

.s-lib-profile-social: this class targets the whole social networking section.

Want to target specific parts of the social networking information?

  • .s-lib-profile-social > strong: target the "Social:" heading.
  • .s-lib-profile-social > a: target the social networking icons.

Default CSS:

.s-lib-profile-social

(No default CSS)

Pointer - section 9

Subject specialties:

.s-lib-profile-subjects: this class targets the whole subjects section.

Want to target specific parts of the subjects section?

  • .s-lib-profile-subjects > strong: target the "Subjects:" heading.
  • .s-lib-profile-subjects > a: target the subject category links.

Default CSS:

.s-lib-profile-subjects

(No default CSS)

Want to target one box? Click on the icon and grab the box ID! Then use that number to create the HTML ID.
Ex. If your box ID is 123, use #s-lg-box-123 in your CSS!
If you want to target a specific part of that box - like the box header - just combine the ID with the code above. 
CSS code example:
#s-lg-box-123.s-lib-box .s-lib-box-title {
  background-color: #ff0099;
}