Skip to main content

5 Spells For Making Your LibGuides Boo’tiful

It's Halloween, one of the few times a year you can dress up in a fun and unique costume. The more effort you spend on your look equals more attention. That boo'tifying is time well-spent. 

 And the same goes for your LibGuides! Dress up your guides and engage users with your tricked out content.

This edition of LibGuides Spells & Potions focuses on ways you can illuminate your guide content, helping to ensure your patrons have a magical user experience.

1. Make an Image Pop with Box-Shadows

Not unlike ghosts, images can sometimes 'blend' into the white space behind it. Making them almost invisible to the eye. It would be so much easier to spot those ghosts if they had a shadow. The same goes for your images! 

Using CSS box-shadows, give your images dimension, making them visually 'pop' out of the webpage they're embedded on. Plus, if you add the box-shadow property you won't have to redesign the image over and over again in Photoshop. Simply change the box-shadow properties right inside your LibGuide.

And, if you're not a CSS/HTML-expert, no worries. If you can copy and paste and understand the basic principles of how box-shadows work, you're good to go!

Step One: Understanding Box-Shadow Declarations

If you've ever seen a box-shadow CSS statement, it can be hard to understand which rule effects what. 

Here's a quick breakdown of structure:
(Note: There are more attributes you can add, this is just the basic structure)

  •   Vertical-Shadow  : The position/depth of the vertical shadow.
  •   Horizontal-Shadow  : The position/depth of the horizontal shadow.
  •   Blur:   How far you want the blur distance to extend, the larger the value, the bigger and blurrier the shadow.
  •   Color:   The color of the shadow; default is black.

box shadow css map

Step Two: Creating Box-Shadow CSS

There are two ways to create box-shadow code:

  • Noobie Users: Make use of box-shadow generators that allow you to customize the all the elements and copy/paste the resulting code.
  • Experienced Users: Copy/paste the below primer code and experiment with the values!
    • Experiment! There are more attributes you can add to your box-shadow declaration.
box-shadow: 10px 10px 55px #888888;

Step Three: Adding To Your LibGuides Images

  • Navigate to your LibGuide > Rich-Text Asset > Add Image.
  • Once the image has been added, click the SOURCE button in the Rich-Text Editor
  • Locate the <img> tag and add the box-shadow code, preceded by the style tag.
<img style="box-shadow: 10px 10px 5px #888888;" src="URL-of-Image" alt="Alternative-Image-Text" />

2. Make Links Open In a Pop-Up Window

When adding links to your Rich-Text box, you've probably made use of opening links in the same or new window.

But, did you know that can also create a link that opens in a pop-up style window?

But, just like that scary automaton skeleton that pops-up and scares you when you walk past, there's a time and a place for using pop-up links. 

Recommendations for Using Pop-Up Windows

Pop-ups can be annoying, and some browsers block certain kinds of advertising and some pop-up windows. But the LibGuides pop-up link type works a bit differently. It's the same as telling the link to open in a new browser window, but the window is a smaller and defined size. Additionally, it's a user-initiated click rather than a time-based or unexpected pop-up. If used correctly, these can not only be highly effective but can also enhance the user experience. Bottom-line, it should not interrupt the user experience. Here are some suggestions for when to use, and not use, pop-up windows. 

When To Use

When Not To Use

  • Collect info: Small, contained forms.
  • Blog/Newsletter Sign-Up: Short forms.
  • Txt Alerts: Receive SMS Alerts from the library.

- Use LibWizard to create popup sign-up forms! 

  • Rendering a Full Website in a pop-up window.
  • Long/Scrolling feedback forms.
  • Databases/catalog websites.

Notice a trend here? The recommendations for using a pop-up window are centered around information gathering, feedback, or sign-ups...all in the control of the user.

This way, the user is in the driver's seat during the process and isn't detracted from the main reason they're on your LibGuide. 

Create a Pop-Up Window

  • Navigate to your LibGuide > Rich-Text Asset Add Hyperlink
  • Enter Link Title & Target URL
    • ​Accessibility TipTo alert users that the link opens in a new pop-window, add "Link Opens in Pop-Up" to the link title.
  • Click the Target Tab
  • Select <pop-up>
  • Enter the Name of your Window
  • Recommendations:
    • ​Enable Resizing
    • Enable Scroll Bars
  • Width: Input width and height dimensions
  • ​Note: Because it doesn't take percentage (%) widths, these pop-ups might display large on mobile device screens. Be sure to use it for small windows and enable resizing.
Adding a Pop-Up Window To Your LibGuides

3. Creative Commons License Your LibGuides

Librarians are sharers.

You love seeing the cool things people are doing and how you can do them too.

And wouldn't it be just so much easier if you knew exactly how/when/why you could reuse other LibGuides?

We agree, so that's why it's a great idea to add Creative Commons licensing to your LibGuides. 

This way, you're not only licensing your LibGuides content, but you're also letting other librarians know how they can use it too.

Creative Commons Licensing Options

There are seven CC-licensing options, starting at the least-restrictive and working down to the most-restrictive license type. 

Explore the licenses below, and discover which one works for your entire LibGuides system or even individual LibGuides.

What's Creative Commons?

"Creative Commons helps you legally share your knowledge and creativity to build a more equitable, accessible, and innovative world."*

Creative Commons provides:

  • Free, easy-to-use copyright licenses;
  • Multiple license-types to accommodate your needs;
  • Licenses that are legally enforceable.

Public Domain Dedication - CC Zero allows you to dedicate the work to the public domain by waiving all rights to the work worldwide under copyright law. 

Attribution License

Attribution - Lets others distribute, remix, tweak, and build upon your work, as long as they credit you for the original creation.


Attribution-ShareAlike - Lets others remix, tweak, and build upon your work as long as they credit you and license their new creations under identical terms.


Attribution-NoDerivs - Allows for redistribution as long as it is passed along unchanged and in whole, with credit to you.


Attribution-NonCommerical - Lets others remix, tweak, and build upon your work non-commercially, and although their new works must also acknowledge you and be non-commercial, they don’t have to license their derivative works on the same terms.


Attribution-NonCommercial-ShareAlike - Lets others remix, tweak, and build upon your work non-commercially, as long as they credit you and license their new creations under the identical terms.


Attribution-NonCommercial-NoDerivs -  The most restrictive of the six main licenses, only allowing others to download your works and share them with others as long as they credit you, but they can’t change them in any way or use them commercially.

* Content taken directly from the Creative Commons Website

Licensing Your LibGuides Content

Start the process at CreativeCommons.Org/share-your-work and walk through the three-step process which helps you identify the right license for you.

Be sure to fill out the attribution section and put in your LibGuides profile URL so others know how to attribute your original work. 

Creative Commons Attribution Licensing Section

Embed In Your LibGuides

The final step provides you with code that you can embed into your LibGuides, letting librarians know how they can reuse your LibGuides content.

  • Copy the Creative Commons Embed Code
  • Navigate to LibGuides > Add Box > Add Widget/Embed Code
  • Embed the Creative Commons Embed Code
  • Voila! You're Done!
Creative Commons Applied to a LibGuide

Apply License System-Wide

If you're a LibGuides admin and you want to apply your CC-license to your entire LibGuides system, here's how!

  • Follow the same steps, but license your entire LibGuides system rather than a specific-LibGuide.
  • Copy the embed code.
  • Navigate to Admin > Look & Feel > Header / Footer / Tabs / Boxes.
  • Embed your Creative Commons Licensing Code in your footer! This way, every single page of your LibGuides is covered by your legally-protected license.
  • If you're a LibGuides CMS customer, you can provide different licenses to groups of guides with LibGuides CMS groups.

4. The Importance of Fonts

Font choice has a huge impact on your LibGuides website. It can impact readability, mood, perceived page length, user experience, and much more. 

The type of font you choose communicates the character and purpose of your website. 

Here's an example from that illustrates how font-type can change the implied meaning of a word.

Which 'might' conveys strength, certainty, confidence? And which one doesn't? Both fonts are the same exact size, yet one seems larger. More impactful. 

TutsPlus visual example of font type

To Serif or To Sans-Serif

There are many different types of fonts, but most fall into two classes: serif fonts and sans-serif fonts. 

  • Serif Fonts - Decorative embellishments are added.
    • Examples: Times New Roman, Georgia, Courier New.
  • San-Serif Fonts - Are without embellishment, and are much easier to read on large bodies of text. 
    • Examples: Verdana, Tahoma, Lucida Sans

Where to Use Serif Fonts

Where to Use Sans-Serif Fonts

  • Guide Title
  • Guide Description
  • Box Title
  • Copy inside the LibGuides Box:
    • Rich-Text
    • Links
    • etc.

General Font Recommendations

  • Avoid Using Too Many Fonts: If you have too many web fonts on one page, it can be visually confusing to users. Plus, they can cause significant readability issues as the user's eyes have to keep adjusting.
    • We recommend 2-3 fonts per webpage.
  • Pay Attention to Line-Spacing: Line-spacing is the amount of spacing between your lines of text. Text that is right on top of each other can be difficult to read.
    • Tutsplus recommends that line-spacing be about 0.3em - 0.5em larger than your font size. 

Now you know how choosing just the right font can effect the efficacy and delivery of your LibGuides content!

The following Springy Tech Tip Video focuses on how you can add Google Fonts to your LibGuides system and make use of their open-source library of over 800+ font options.

If you don't want to use Google Fonts, simply jump ahead to the 4 minute mark and replace the Google font code with your own CSS font-family choice.

Links Mentioned in Video:

Adding Google Fonts to LibGuides

5. Adding a Favicon to Your LibGuides

They say that great things come in small sizes. We can attest to that, Snickers minis are Halloween's greatest accomplishment! 

Favicons are no different. They're small, graphical icons, 16x16 pixels, that display in the webpage's browser bar and next to the webpage's name in the list of bookmarks. Plus, a few browsers display favicons when you create a shortcut link on your desktop or mobile device.

They serve as visual indicators, helping visitors identify content in their browser - especially if they have tons of tabs open. 

Even though favicons are really small, and probably the least important part of your LibGuides website, it's this attention to detail that extends your brand's presence... everywhere

examples of favicons

Creating a Favicon

There are tons of favicon generators out there, but no matter what you use there are two general rules:

  • File Type = "ico" format
  • Image Size = 16x16 pixels

Favicon Generators

Get Favicon Inspiration

You've Got a Favicon - Now What?

You must be a system-level admin for the following.

  • Upload your favicon to your LibGuides image manager
    • Yes - LibGuides can handle .ico file types!
  • Click the to view the image URL
  • Copy the image URL. 
  • Go to Admin > Look & Feel > Custom JS/CSS Code Area
  • Insert the following outside your <style> </style> tags
  • Replace Your-Icon-URL with the URL for your favicon image
springshare favicon upload screen
<!-- Browser Favicon -->
<link rel="shortcut icon" href="YOUR-ICON-URL" />