Reusable Boxes, Widgets, and more

Why you might use this (example use case)

When customizing your LibGuides profile contact info, the "Email Address" field generates an "Email Me" button but does not display the actual email address. 

For various reasons, you may wish to have your actual email address displayed, as well.
 

HTML code for a clickable email link

Notes:

• The red bold text is a placeholder for your email address.

Where to enter the code

1. Navigate to the LibApps dashboard.
2. Select My Profile in the command bar.
3. Stay on the My Profile tab.
4. In the Address* field (Contact Info section), copy and paste the code above (replacing the red bold text with your email address).
   *With flexible schedules, it is common practice not to list your physical office number/location in the "Address" field.
5. Select the blue check button to Save.
   

Why you might use this code (example use case)

Instead of using a table for layout purposes (which violates accessibility best practices), you can use CSS code display content in two columns.

CSS code for two columns of rich text

Notes:

• 00000000 is a placeholder for the unique Content ID number, so the code applies correct content item.
• To find the Content ID number:
  1. Select the Page button at the top of the page (next to the Page URL)
  2. Under the Reorder / Move section of the dropdown menu, select Content Items.
  3. Navigate to the box and content item you are working on and find the Content ID number in parentheses.
  4. Select the Save Order button in the box to return to regular edit mode.
     

Where to enter the code

1. In edit mode, select the Guide Layout button (top right corner).
2. Select Guide Custom JS/CSS from the dropdown.
3. In the text area, copy and paste the code above (replacing the red bold text with your Content ID number).
4. When finished, select Save.
   

Why you might use this code (example use case)

Instead of using a table for layout purposes (which violates accessibility best practices), you can use CSS code display content in two columns.

CSS code for two columns of assets

Notes:

• 00000000 is a placeholder for the unique Box ID number, so the code applies to the correct box.
• Make sure there is a single space after the box number and the rest of the code, (i.e., .s-lg-link-list...).
• To find the Box ID number,
  1. Select the Edit button (pencil icon) in the top right corner of the box.
  2. The Box ID will be listed on the Box Info tab.
     

Where to enter the code

1. In edit mode, select the Guide Layout button (top right corner).
2. Select Guide Custom JS/CSS from the dropdown.
3. In the text area, copy and paste the code above (replacing the red bold text with your Box ID number).
4. When finished, select Save.
   

Full instructions for creating a NameBadge and the custom HTML code used to add the NameBadge "Hear my name" button to your LibGuides profile box are available on the Name Pronunciation page of the LibGuides Accessibility guide.