I’ve gotten a lot of questions recently about customizing the default A-Z Database list in LibGuides 2.  This post will show you how to create a key for any icons that you might use to help describe your databases.

The first step is to create a new template for your A-Z layout.  You can reach this from the “Look & Feel” option in your admin module and then select the “A-Z Page Layout” tab.  Once you’ve created and named your new template you’ll need to add the following HTML.  I use four icons so I have four lines dedicated to images, just replace the appropriate attributes and link your images.

<div class=”pad-bottom-sm”>

Access Information

</div>

</div>

<div class=”az_access”>

<div class=”txt pad-top-sm”>

<img alt=”#” title=”#” class=”s-lg-icon” src=”yourimage.png”> Text<br>

<img alt=”#” title=”#” class=”s-lg-icon” src=”yourimage2.png”> Text<br>

<img alt=”#” title=”#” class=”s-lg-icon” src=”yourimage3.png”> Text<br>

<img alt=”#” title=”#” class=”s-lg-icon” src=”yourimage4.png”> Text

</div>

<div class=”margin-bottom-xlg”></div>

This HTML will need to be entered wherever you wish to place your key, mine is in the top of the right column so it needs to go here:

<div  id=”col2″  class=”col-md-4 center”>
<div class=”s-lib-public-side-header”>

In my text editor, the above code appears at line 41 but it may be slightly different in yours.

Once you have entered the HTML, you now need to add the following CSS to LibGuides 2.  I keep a separate style sheet just for the A-Z page and I would suggest that you do the same.  It just makes it a lot easier to keep track of everything.

.az_access {
background-color: #f8f8f8;
border-radius: 5px;
margin-top: 5px;
padding: 10px;
}
.az_access img {
margin-right: 5px;
margin-bottom: 5px;
}

That’s it!  There are certainly other ways that you can do this but this way is pretty simple (I think).  If you have any questions feel free to contact me and I’ll do my best to answer.