Adding a profile box to a guide

What is a profile box?

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.
  3. 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.
  4. Select Profile from the Type dropdown.
  5. 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.)
  6. 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.
  7. 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.
  8. Click the Save button.

Clicking the Add Box link

Adding a new profile box


Customizing the look of your 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;
}

Related Articles