Skip to main content

Boilerplate content for research guides: Jazzing Up LibGuides

This unpublished guide contains copyable/linkable generic content for other guides.

Introduction

Although there are many features Springshare added when we migrated to LibGuides 2, one of the nicest improvements is something that's harder to notice: the code that runs the site is now based on Bootstrap, a framework that uses Cascading Style Sheets and JavaScript to change the way the site looks and works.

There are many things you can do with Bootstrap tools in LibGuides 2, but it appears that Springshare has not included the full set of Bootstrap specifications. If you see something on the Bootstrap website that you'd like to try, keep in mind that it may not necessarily work. Nevertheless, there are still many tools you can use, and I created this guide to help you learn more about them.

Highlighting

Want to use some highlighting to draw attention to a passage in your LibGuides? It's really easy! All you have to do is use the <mark> tag from HTML5 specification. The browser will do the rest.

This is <mark>highlighted text</mark>.

So now you can point out something important in your LibGuides when you really need to!

Adding Labels

Would you like to indicate that you've added something new to your LibGuide? Just add a label to it. The code is easy:

<span class="label label-default">New!</span>

Here's how that looks:

Fantastic New Database New!

But gray is a little bland, don't you think? You can add a little color with just a little extra effort. All you have to do is change the class. Keep the "label" part, then change the second part to the color you want:

  • Default (label-default, gray): Default
  • Primary (label-primary, dark blue): Primary
  • Success (label-success, green): Success
  • Info (label-info, light blue): Info
  • Warning (label-warning, yellow): Warning
  • Danger (label-danger, red): Danger

As you can see, the text can read anything you want it to say. If you need additional assistance, visit the Bootstrap CSS guide.

Font Awesome

Font Awesome is an open-source icon project that uses small icons as a type of illustration. All it takes is a little Cascading Style Sheets know-how, and you can use these little images to juice up your guides. And the best part is, it's easy to do and there's nothing to unlock.

It's already enabled in our LibGuides. To use an icon, such as the unlock icon I used above, all you need to do is add a short bit of code:

<span class="fa fa-unlock"></span>

Nothing needs to go inside those tags for the icon to show. The first part of the CSS class, "fa," should be there to tell the browser that it's a Font Awesome code. The second part, in this case "fa-unlock," is the specific icon. As another example, you can create a heart using the code "fa-heart-o." It looks like this:

You can see a list of Font Awesome codes on the Font Awesome website. There's also a cheatsheet with a master list.

There are many tricks you can use to enlarge Font Awesome icons, to make them a fixed width if they're throwing off your design, and other things. For additional details on how to modify Font Awesome, take a look at the Examples page.

An important note about branded Font Awesome icons
Some icons have corporate branding in them -- for example, you could put a Facebook or Twitter icon to indicate a link to a social media account. Ad blockers in some Web browsers may block these branded Font Awesome icons.

Block Quotes in Bootstrap

You may know that for quotations you can use the <blockquote> tags, but they look a little different with the markup Bootstrap provides. You'll notice the border on the left side only, and the text is a little larger:

This is a quotation. Isn't it lovely?

You'll also notice that the quotation isn't indented much. Will the left-hand border be noticeable compared to the border of the LibGuides container in which it resides? Maybe, maybe not.

How'd you do that?

If you'd like to make the first paragraph of your text a little larger, as I did in the introduction, just use the "main" CSS class to your paragraph:

<p class="main">

Need help? Ask me!

Woodruff Library's picture
Woodruff Library
Contact:
540 Asbury Circle
Atlanta, GA 30322
Reference: 404-727-6875
Circulation: 404-727-6873
Website / Blog Page
© Emory University Libraries - 540 Asbury Circle, Atlanta, Georgia 30322