Libguides: a couple of easy things (1)

Well, the response to my last post was quite surprising. So I’ll continue with a few posts on very easy things to change the look and feel of your guide.

First off though, please do consider joining the Springshare lounge – help is literally there for the asking, and no question is too basic.  You join a group based on your usage.

Secondly in response to what we use: Libguides CMS V2. If you’re on V1 still, update (free) to V2 as it offers so much more. We also have a paid subscription to LTFL (library things for libraries), we’ve just subscribed to their book display widget,  it’s an extra cost, but it’s for our 3 libraries at what I consider a reasonable cost, and they’re very generous on their trial period. Cost depends on how many of their services you use. If I had more budget I’d subscribe to their series and tagging services as well.

Finally – if you’re looking for non-video guidance on libguides, I’ve found the University Libguides to be the best, (Kent for HTML/CSS, Illinois for getting started,  Northwestern, Calgary, etc. )as they’re the most extensive and intensive users of Libguides, but I’d like to also give a shout out to RILINK schools, as their guide is also very comprehensive.

OK finally, a few easy things

Changing font size just for one guide:

This is done by changing the “Guide Custom JS/CSS” which is found under the picture icon.

(note for beginners: I’ve placed the coding inbetween: /* text */ : so it doesn’t mess up my blog! you’ll need to remove that for it to work – i.e just copy from <style> to </style> if you want to include more than one element just include them all in-between the style and style elements)

How to make the font size bigger in your boxes:

Since some of my boxes do need text, I’ve made them 24 point so they’re easier to read for little ones.

 

/*

<style>

/* increases font size on box headers */
.s-lib-box .s-lib-box-title {font-size:24px;}

 

</style>

*/

How to make the font size bigger in your tabs:

Ditto for tabs – all these tabs are 18 point – also as good practise this forces you to keep the number of tabs under control and only on one line!

 

/*

<style>

/* increases font size on tabs*/
#s-lg-guide-tabs {font-size:18px; font-weight; normal;}

</style>

*/

How to make link description under link and bigger

These elements are all links (so I can get the stats), but I didn’t want the description to be tiny and at the side, and have a dot next to the image.

*/

<style>

 

/*link description center and bigger font*/
.s-lg-link-desc {font-size: 14px; font-weight: bold; text-align: center; display: block; margin-right: auto; margin-left: auto;}
.s-lg-tn {margin-left: 0px;}

</style>

*/

How to remove breadcrumbs

that’s all the stuff that makes your header look cluttered on the left you see the standard libguide with the blue breadcrumbs and all the tags etc, on the right the “clean” version with only the guide name and top banner:

*/

<style>

/* removes breadcrumbs */
#s-lib-bc{display: none;}

</style>

*/

That’s all I have time for now! Requests and questions welcome in the comments.

And please remember I didn’t invent any of this, most of it was the result of asking Springshare or in the lounge how to do something I envisaged. Their customer service and response is amazing.