Do-It-Yourself LibGuide Enhancements: Home

If you have a single-page guide, you might, for aesthetic reasons, not want to have the ": Home" that normally appears at the end of the guide name that titles the page.

One option is to think of a page name that goes well following the guide name and colon, e.g., "Library Call Numbers: How to Find a Book on the Shelf". But you could also make the page name and colon not appear, as we did with our Glossary of Library Terms page.

Hiding the Page Name

There are two steps to take:

Create a Blank Page Name

You could have a blank title by entering the HTML code for a non-breaking space in the title field:   – ampersand-n-b-s-p-semicolon.

Hide the Colon That Follows the Guide Name

The JavaScript below finds the first colon that appears in the guide name field, and replaces it with nothing.

Create a script file by copying this code into a text editor like Windows Notepad. Save the file with a name that ends with ".js", I named my file "colonectomy.js."

// Removes the colon from a LibGuides guide name
let text = document.getElementById("s-lg-guide-name").innerHTML; 
document.getElementById("s-lg-guide-name").innerHTML = text.replace(":", "");

Upload the file to LibGuides using their Upload Customization Files function in Admin > Look & Feel > Custom JS/CSS. Make note of the "Include Code" shown for that file.

In one of the boxes in the body of the guide, use the HTML editor to hide your "include code" line. Add a Rich Text/HTML element to a box if you don't already have one somewhere. The line will look like this:

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

Click and drag the lower right corner of this box to see the effect:

Here is the CSS code:

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:

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

Example:

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:

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:

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.

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:

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:

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

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:

Specifying border-radius creates rounded corners:

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.

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

You can nest the boxes as shown here:

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:

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.

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:

In the HTML editor:

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

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.

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