Skip to Main Content

Best Practices for LibGuides at UCLA

Suggestions and guidelines for using LibGuides to best effect in the UCLA Library.

Editing Source Code / Reactive Design

All of the techniques on this page require editing a box's source code. If you're not familiar with the basics of html, get help from someone who is! Also, note that these tricks are not fully integrated with the system's reactive design, so may not look good on tablets or phones.

Note: This is a bad use of a highlight box. Its use should be reserved for multi-column layouts, where you want to draw attention to one of the top boxes.

Highlight Box

When you want to emphasize one box on a page, use a highlight box.

CSS Code

<script>
document.getElementById("s-lg-box-3903077").className += " highlight-box";
</script>

  • Replace the number after s-lg-box- with the 7-digit number of the box you want to highlight.
  • Highlight boxes should always be at the top of the page.
  • Do not combine a highlight box with highlighted content or box-in-box.
  • Don't use a highlight box with a colorful picture in it. The whole point of the highlight is to draw the user's eye to something they might otherwise overlook.

Highlight Content

Sometimes you don't want to highlight a whole box, but content within a box. How you do it depends on whether it's an html element you've created in rich text content, or a system defined tag like a link group. Note that the highlighting works best with bold text; links work especially well since they're automatically bold and colored.

Highlight Rich Text

In a rich text section, you have direct control over the html. Simply add the following attribute to the tag surrounding the content you want to highlight. You can always create a div tag solely for this purpose.

class="highlight"

Optional: style="padding: 10px 10px 10px 10px"

You may need to adjust the padding, depending on the element. It defaults to 10px on all four sides. The second optional line gives a template for an additional attribute which will override that. The four numbers are (in order) top, right, bottom, and left.

Highlight a List of Links or Databases

For this, you'll need to find the id attribute associated with the element you want to highlight, usually in a div tag. You can do that by looking at the source code or by seeing the numbers in the "Reorder Content" popup. In a rich text section after that (it must come after!), put the following code.

<script>
document.getElementById("s-lg-content-3903077").className += " highlight";
</script>

Change the code after s-lg-content to match the actual id of the div tag you want to affect. You may also need to adjust the padding depending on placement within the box.

Box in Box

class="box-in-box">

CSS Code for a Simple Box in Box

<div class="box-in-box">

class="box-in-box highlight" style="clear: right; margin-top: 10px;">

CSS Code for a Highlight Box in Box

<div class="box-in-box highlight">

There are two ways to do this.

Simple Box in Box

  • Put the opening div tag at the point where you want the top of the inner box to be. (Note, the inner box always goes before the content you want to wrap around it.)
  • Follow it with the content for the inner box. If you begin with an h3 tag, remember to use the "top-head" class.
  • Put a closing div tag.
  • Then put your main box content. If it's long enough it will wrap around the inner box.
  • If you have multiple content elements which you want to wrap around the box, use the trick below for wrapping lists round images.

Re-using a LibGuides Box

Instead of the normal option to re-use a box on your page, you can use a widget to embed a mapped version of any box into another box.

  • In the LibGuides menu, go to Tools / Widgets.
  • Select Content Box.
  • Use the page to get the javascript code for the box you want to re-use.
  • Copy that code into the box where it will appear.
    • IMPORTANT! Delete the first five script tags and all the link tags. Your code should start with <script src="//lgapi.libapps... (These lines are needed if you're embedding a box outside of LibGuides, but will interfere with existing script calls inside another guide.)
  • Put <div class="widget-in-box"> just before the widget code.
  • Put a closing </div> tag just after the widget code.
  • Follow that with the "wrapping code" (below) if you want other elements to wrap around it.

Adding Images - the Extra Touches

class="box-in-box" style="margin: 0px; padding-top: 0px;"><img src="file.jpg" alt="This is a what an image with no margins looks like." style="float: right;" />

Sure, everyone knows how to add an image! But there are a few things you can do to make it look even better.

If you choose Left or Right alignment in the Image Properties, the text will wrap around your picture. And if you put a number into the HSpace box (H for horizontal) it will add some white space to the left and right sides of the box so your text isn't right up to the edge.

class="box-in-box" style="margin-left: 15px; margin-right: 15px; padding-top: 0px;"><img src="file.jpg" alt="And this is an image with horizontal spaces/margins set." style="float: right: margin-left: 15px; margin-right: 15px;" />

But wait! You don't actually want white space on the outer side! But we do want space on the bottom. So there's an easy way to do it.

In the normal edit mode, choose the alignment you want and set HSpace to 15.

class="box-in-box" style="margin-left: 15px; margin-bottom: 10px; padding-top: 0px;"><img src="file.jpg" alt="And this is an image with those few small tweaks made." style="float: right; margin-left: 15px; margin-bottom: 10px;"  />

Now go into the html/source code and you'll see that your image has the following info under the style attribute: float: right; margin-left: 15px; margin-right: 15px;

Change the last part to read margin-bottom: 10px; and you're set. Hopefully you can figure out what to do with an image on the left side!

Wrapping Link/Database Lists around Images or Boxes

It's easy to wrap text around an image when they're in the same Rich Text/HTML content block. But when you start combining content types (Rich Text, Links, Databases, etc.), LibGuides assumes vertical stacking of elements. In technical terms, each content element is a separate div, and each div clears the floats from the previous div. So if you want your images to exist to left or right of other elements, you need to do the following:

  1. Put your image in a Rich Text element. It can be by itself, or combined with text.
  2. Save and click on Source to open the HTML editor.
  3. Enclose the image tag within div tags. The opening tag should be <div style="float: right;"> (Remove any float attributes within the image tag.)
  4. Add the following css before the image div:

<style type="text/css">.clearfix:after { clear: left; }
</style>

(If you want the images on the left, then change to float: left, clear: right.)

Finally, add your Links, Databases, Books from the Catalog, etc.

Use with Caution! This code affects the "clearfix" across the page, so may screw up other float effects in use elsewhere on the page. So only use it if all of your floats on the page are on the same side (left or right) and you want all of them to have the wrap-around effect.

Examples

Displaying Lists in Rows

You can arrange a list of items into horizontal rows rather than the normal vertical list. Some limitations:

  • It must be a single <ul> tag. So because of the way LibGuides builds "link groups", it must be a homogenous list of Links, Databases, or Books from the Catalog. No mixing content types.
  • This method puts each list item in a "block", so it works best with Books from the Catalog entries using cover art.

CSS Code

<style type="text/css">ul#s-lg-link-list-303485 li {
    max-width: 155px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
}
#s-lg-link-list-303485 span.s-lg-book-title {
   display: block;
   clear: left;
}
</style>

  • Change the numeric ID code after #s-lg-link-list- (in two places) to match that of the list you're doing.
  • Change the max-width number to allow wider (but fewer) list entries in each row.
  • Delete the four lines before the closing tag if you're not doing Books from the Catalog with cover art. (It forces the text to appear below the cover art rather than squeezing it in on the right.)

Examples

Displaying Lists in Columns

You can achieve a similar effect to rows by breaking your list into multiple columns. The latest version of CSS supports multiple columns for content, but it hasn't been implemented fully (or in the same way) in most browsers. Some limitations:

  • As with rows, it must be a single <ul> tag. So because of the way LibGuides builds "link groups", it must be a homogenous list of Links, Databases, or Books from the Catalog. No mixing content types.
  • Because it's new, the browsers are still changing how they handle it, so only use this on pages you review regulalry... and are willing to check in multiple browsers.

CSS Code (updated for responsive design)

<style type="text/css">
@media (min-width: 768px) {
ul#s-lg-link-list-7897755 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 15px; /* Chrome, Safari, Opera */
    -moz-column-gap: 15px; /* Firefox */
    column-gap: 15px;
    }
li {
   -webkit-column-break-inside:avoid;
   page-break-inside:avoid;
   break-inside:avoid;
   -moz-column-break-inside:avoid;
   -o-column-break-inside:avoid;
   -ms-column-break-inside:avoid;
   column-break-inside:avoid;
   }
}
</style>

  • Change the number after s-lg-link-list- to match the actual id of the ul tag you want to affect.
  • Change the numbers after column-count: (all three of them) if you want more than two columns.
  • If you're using a bulleted or numbered lists, change the column-gaps to 30px to leave room for bullets/numbers.
  • To add a vertical line between columns, change the column-gaps to 30px and add the following three lines after the column-gap lines:

    -webkit-column-rule: 1px solid #ADCDE5;
    -moz-column-rule: 1px solid #ADCDE5;
    column-rule: 1px solid #ADCDE5;

Examples

Scrolling Boxes

  • For this one, you'll need to get the ID attribute associated with the box's content div tag (the first one after the h2 tag). Change the sample appropriately.
  • Change the number after height to scale the box to different sizes.
  • Use scrolling boxes sparingly! Users who don't page scroll are even less likely to scroll through a long list inside a narrow window. Consider using a multi-column presentation (see above) and/or separating your content into more pages. Particularly long lists are best published as pdfs.

CSS Code

<style>
#s-lg-box-collapse-3593616 { height: 600px; overflow: auto; }
</style>

Suppress Link Icons

While use of link icons (like the blue key) is the norm, not everyone is a fan. And while you can refrain from adding them to your own Links, they're "built-in" on any Databases you re-use from the A-Z list.

While you can't actually delete the key from Database links, you can suppress their display throughout a specific guide. To do so, go to Guide Custom JS/CSS in the Guide Layout menu and add the following code:

CSS Code

<style>
img#s-lg-icon { display: none; }
</style>

Display Link Descriptions on Same Line as Link Title

CSS Code

<style>
#s-lg-box-3586526 .s-lg-link-desc {display: inline; }
</style>

  • To affect a single box, replace the seven-digit box number with the id associated with your box.
  • To affect a single list, replace the whole id code (the part starting with #) with the id associated with the list's <ul> tag.
  • To affect the entire page, delete the whole id code (so the second line begins with the period).
  • To affect an entire guide, delete the id code and put the whole thing in the Guide Custom JS/CSS in the Guide Layout menu.