Skip to main content
College HomeLibrary Home
Close Menu

Do-It-Yourself LibGuide Enhancements: Home

A companion to a presentation given at the 2019 Hawaii Library Association Annual Conference, on how libraries can add features to their LibGuides environment using custom CSS and JavaScript.

Adding and Using Custom Code in LibGuides

CSS (Cascading Style Sheet) and JavaScript code can be added to your LibGuides environment to implement features not provided by the LibGuides platform.

In LibGuides Admin

Log in as a LIbGuides administrator. Under the Admin menu, select Look & Feel. Then go to the Custom JS/CSS tab to enter your code into the box. CSS code should be enclosed in <style> and </style> tags. JavaScript should be within <script> and </script> tags.

You can also upload CSS and JS files to your LibGuides environment by clicking on the Upload Customization Files link at the bottom of that tab, below the JS/CSS box.

Creating/Editing Guides

When adding content to a guide box, choose the Rich Text/HTML option, as you will have to manually add tags to the HTML source code of the box contents.

Be aware that when you are using the Rich Text Editor, these enhancements will usually not be shown in the editing interface as it will look on the actual guide. Once you close the editor, the correct styling will be shown.

Conventions for Examples

In this guide, examples of how a particular effect looks or works are shown in boxes with black borders. CSS code is shown in boxes with orange borders. HTML code is shown in boxes with blue borders.

Hanging Indent

This is useful for citation examples, because the line will automatically wrap properly on any size of screen.

Examples:

Healy, T., Howard, M., Fine, L., Howard, C., Howard, S. Besser, J., . . . DeRita, J. (2008). Patterns of injury from staged violence in theatrical performances. Journal of Threaded Fastener Research, 10, 111-133.
Healy, T., Howard, M., Fine, L., Howard, C., Howard, S. Besser, J., . . . DeRita, J. (2008). Patterns of injury from staged violence in theatrical performances. Journal of Threaded Fastener Research, 10, 111-133.

Here is the CSS code:

.hangingindent {
padding-left: 36px;
text-indent: -36px;
line-height:2;
}

Note that there is a period at the beginning of the first line. The "line-height:2" line is optional, it double-spaces the lines, as some citation formats call for.

In the HTML editor:

Put <div class="hangingindent"> at the start of your citation, and </div> at the end. Make sure there are no line break tags <br /> inside the citation. If you want to prevent a line from breaking at a space, replace the space with a non-breaking space code &nbsp; (note that the code includes a semicolon). For example, to keep the ellipses mark in the citation above from breaking, it's coded as J.,&nbsp;.&nbsp;.&nbsp;.

The HTML code for the citation looks like this:

<div class="hangingindent">Healy, T., Howard, M., Fine, L., Howard, C., Howard, S. Besser, J.,&nbsp;.&nbsp;.&nbsp;. DeRita, J. (2008). Patterns of injury from staged violence in theatrical performances. <em>Journal of Threaded Fastener Research</em>, <em>10</em>, 111-133.</div>
This will work with paragraph <p> tags as well as <div> tags. However, using paragraph tags will put some space below each citation. If you are creating a sample works cited list with the lines evenly double-spaced, you should use <div> tags. Alternately, you could specify margin-bottom:0 to remove the space.

Yellow Highlighter

Create a yellow highlighter effect by setting a bright greenish-yellow background color that slightly extends from the text without adding extra space between words, and has subtly rounded corners.

Here is the CSS code:

.yellowhighlighter {
background-color:#df3;
padding:3px 4px;
margin:-3px -4px;
border-radius:3px;
}
When color is specified with three characters, that's a shorthand that means each character is repeated. Thus, #df3 is short for #ddff33.

In the HTML editor:

Surround the text with <span> tags with the class yellowhighlighter, as shown in this example:

<span class="yellowhighlighter">Text goes here</span>

You can make another version of this code in which the color doesn't extend out to the sides. This is useful if you're trying to highlight characters inside a word, when you don't want the color to spread out over adjacent letters.

.yellowhighlightertight {
background-color:#df3;
padding:3px 0px;
border-radius:2px
}

Note the difference between the first yellowhighlighter effect and the second yellowhighlightertight effect.

Definition List

A Definition List (a.k.a. Description List) displays a term followed by a definition.

Example:

Do
A deer. A female deer.
Re
A drop of golden sun.
Mi
Represents the note E in the English-language version of solmization, the system of attributing distinct syllables to notes of the musical scale. The syllables are widely believed to have been derived from a Latin hymm.

A Definition List is a standard HTML list type. However, the LibGuides Rich Text editor does not have a DL function, so you need to manually add the tags in the HTML editor. Be aware that the Rich Text editor will not show the list exactly as it will appear on the actual page.

In the HTML code:

A Definition List begins with <dl> and ends with </dl>.

Each term begins with <dt> and ends with </dt>, and is followed by a definition that begins with <dd> and ends with </dd>.

The HTML code for a Definition List looks like this:

<dl>
<dt>Do</dt>
<dd>A deer. A female deer.</dd>
<dt>Re</dt>
<dd>A drop of golden sun.</dd>
</dl>

In the LibGuides environment, the definitions are up against the left margin, making the list harder to read. We can use CSS to indent the definitions, which is how Definition Lists usually appear. This code also puts a little bit of space below each definition:

dd {margin:0 0 1em 30px}

As explained in the box at the bottom of the page, I've reduced the indentation from 30 px to 15 px on smaller screens.

dd {margin:0 0 1em 15px}

Hidden "New Window" Message

Having a link open up a website in a new tab or window can cause difficulty for people with sensory, mobility, and cognitive disabilities. It can be disorienting, and it prevents you from using your Back button to return to the previous page. It is recommended that you avoid opening a new tab or windows if at all possible; if opening a new tab or window is unavoidable, it is recommended that you warn the user with a note or icon. 

This technique (adapted from code from the W3C(opens new window)) allows you to add a hidden "new window" warning message to links that open up in a new window. The message remains readable by screen reader programs (which audibly reads out text on the screen), and becomes visible when you either mouse over the link or use the Tab key to get to the link.

Example:

In the Custom CSS box, enter the following:

a.newwindow:hover, a.newwindow:focus, a.newwindow:active {
z-index:25;
}
a.newwindow span {
position: absolute;
left: -9000px;
width: 0;
overflow: hidden;
}
a.newwindow:hover span, a.newwindow:focus span, a.newwindow:active span {
display:block;
position:absolute;
top:1em; left:1em; width:12em;
border:1px solid #0cf;
background-color:#ffc;
color:#000;
text-align: center
}
a.newwindow {
position:relative;
z-index:24;

This code hides the message in the <span> tags until the link is hovered over by the mouse, or the users uses the Tab key to select it.

When composing your page content and creating the link, add a warning message like "(opens new window)" to the end of the link text.

In the HTML editor:

Within the opening <a href="URL"> tag, add this: class="newwindow"

Put <span> in front of the warning message and </span> after the message and before the closing </a> tag. The span tags delineate the text that will be hidden.

The HTML code for a simple link looks like this:

Please visit the <a class="newwindow" href="https://webaim.org/" target="_blank">WebAIM<span>(opens new window)</span></a> website.

The order of the attributes inside the <a> tag is not important. They just have to be separated by spaces.

Text Boxes

These boxes can be used to distinguish content within a LibGuide box.

I've been using the square white box for coding examples.

I've been using boxes with rounded corners for supplemental information or asides.

One page where I've used boxes is our guide to library call numbers.

These boxes are basically divisions with a specified background color, border color and width, and border radius when corners are rounded. The square box above is styled this way:

.squarewhitebox {
border:2px solid #66f;
padding:5px;
background-color:#fff
}

Specifying border-radius creates rounded corners:

.roundedgraybox {
border:1px solid black;
padding:10px 15px;
background-color:#f9f6fe;
border-radius:10px;
}

This code also sets a different border and background color, and put a little more padding space (10px top and bottom, 15px left and right) around the inside of the box.

Like other block elements...
...boxes can be nested.

To use a box, enclose the content in <div> tags and specify the class, as shown here:

<div class="squarewhitebox">Content goes here.</div>

You can nest the boxes as shown here:

<div class="roundedgraybox">Outer box content goes here.
<div class="squarewhitebox">Inner box content goes here.</div>
</div>

You can modify the appearance from how you defined the class by adding a style attribute to the opening <div> tag. Settings in the style attribute override those in the class definition. There are many properties you can specify, such as these:

  • margin-bottom:20px puts 20 pixels of clear space below the box
  • background-color:beige sets the background color of the box to beige
  • border:3px solid goldenrod sets the border as being a solid line, 3 pixels thick, goldenrod in color.

A div tag with a style attribute is coded like this:

<div class="roundedgraybox"  style="margin-bottom:20px">Content goes here.</div>

For accessibility to users with visual impairments, try to compose your content so that it's still understandable even if you can't see the boxes. The presence of the boxes will not be announced by screen readers.  For example, before giving a coding example, I have a sentence that indicates that an example will follow.  For supplemental information, I usually place it at the bottom of that section so that it doesn't disrupt the reading order of the other information in that section.

Responsive Web Design

LibGuides utilizes Responsive Web Design, which changes the layout of the page based on different browser window sizes (a.k.a. the viewport). It will appear differently on mobile devices and desktop monitors. You can see the layout change on a desktop by shrinking or expanding the width of your browser.

You may want to alter your custom CSS depending on window size, e.g., narrower margins, less padding, or smaller indentations on smaller screens. 

You can use media queries to specify different CSS values for different viewport sizes. In this example, I move the definitions in a definition list closer to the edge of the page when the screen is smaller than 768 pixels wide. The parenthetical notes are not part of the code:

<style>
(CSS code for all screens goes here. May be overridden by sections below.)
dd {margin: 0 0 1em 30px} (This line establishes a 30px left margin)

@media only screen and (max-width: 1191px) {
(Code for windows narrower than 1192 pixels goes here; overrides settings defined above.)
}

@media only screen and (max-width: 991px) {
(Code for windows narrower than 992 pixels goes here; overrides settings defined above.)
}

@media only screen and (max-width: 767px) {
(Code for windows narrower than 768 pixels goes here; overrides settings defined above.)
dd {margin: 0 0 1em 15px} (Sets left margin at 15 px on viewports smaller than 768 px)
}

@media only screen and (max-width: 470px) {
(Code for windows narrower than 471 pixels goes here; overrides settings defined above.)
}

</style>
Regular Library Hours
General Information: (808) 455‑0210
Reference Support: (808) 455‑0379