Add to the API Call's URLCustomize the CSSExpandable/Collapsible Subject MenuAdd Stripes to Rows
This is the "Add Stripes to Rows" page of the "Widgets & API Utility in LibGuides & LibGuides CMS (v1)" guide.
Alternate Page for Screenreader Users
Skip to Page Navigation
Skip to Page Content

This group's documentation site is shut down.

As of 12pm EST on February 28, 2018, all LibGuides sites will be using v2.

See our v2 documentation for more on how to use LibGuides v2.

Widgets & API Utility in LibGuides & LibGuides CMS (v1)  

Learn more about widgets and API calls available in LibGuides & LibGuides CMS.
Last Updated: Mar 21, 2015 URL: Print Guide RSS UpdatesEmail Alerts

Add Stripes to Rows Print Page

Creating the List

These instructions work for the Subject list and Guide list APIs.

You can also restyle the Links to Guides box in your system to have stripes as well! So your guides lists in your system can have stripes. Check out the Links to Guides page in the Box Types guide for info.

Go to your login page. You should notice a number in your login URL - it will look something like this:

Jot down the number, then log in.

Create a new guide or go to an existing guide; create a new Rich Text box.

Click add text, then click the Plain-Text Editor tab.

Paste the appropriate code for the list you want.

Change the number in green to match your institution ID.  

When you're done, click Save and Close


Code for the List

Get Code for Subject List

Get Code for Guide List



Here's a screenshot of what your list will look like:

Striped guide list example


Change the Number of Columns

If you want more columns, you'll need to make changes in two places.

First, divide 100% by the number of columns you want. If the number of columns you want is even, subtract 1. If you want 3 columns, you'll change the width to 33%; if you want 4 columns, you'll change it to 24%. (This is to help make the list work in Internet Explorer.)

At the top of your code, change the width to the appropriate number:

.floatcols {
float: left;
width: 24%;

Then, toward the bottom of your code, change the number of columns you want:

$('.mylist').columns({columns: 4});


Change Stripe Color

Look for the snippet of code that reads either:

$('#mylistid ul li:nth-child(even)').css('background-color', '#eeeeee');


$('.libguides_api_list ul li:nth-child(even)').css('background-color', '#eeeeee'); });

Just change #eeeeee to the hex code for your preferred color.

Not sure of the hex code? Check out this chart!


Stripes Won't Line Up

If your stripes don't line up correctly, chances are it's because your subject name, guide name, or username is longer than the width of the column.

There are a few things you can do:

  • Change the name of your subject category or guide. (Ex. "Gay, Lesbian, Bisexual, Transexual Studies" could become "GLBT Studies.")
  • Reduce the number of columns in the box (a 2 column box will give you more "room" than a 3 column box).
  • Expand the width of the box by changing your guide's column widths (Add/Edit Pages > Toggle/Resize Columns).

Loading  Loading...