Skip to Main Content

LibGuide tips

Some tips for using LibGuides

Change background colours for box contents

You can use below five colours to change the background color of your rich-text box content:

To change your box background colours, you need to edit the box's HTML code.

  1. Click the "edit" icon at the right bottom of the box, and select "HTML" to edit its code.
  2. If you want the green background, add "<div class="bg-success">" at the top of the code, and "</div>" at the bottom of the code as below:
  3. Click "save & close" to see the change.


For deep blue, please change "bg-success" to "bg-primary";

For light blue, please change "bg-success" to "bg-info";

For yellow, please change "bg-success" to "bg-warning";

For pink, please change "bg-success" to "bg-danger";

What is bootstrap

Bootstrap is the underlying structure that LibGuides uses for displaying its pages on the internet. 

It is a structure written by developers for website users.  See Its main benefit is that it provides a responsive structure for pages.  This means as the size of the screen changes from small mobile to large desktop screen, the boxes in the pages can be "floated" to provide the best use of screen space.

In our LibGuides it would be great to use this as best as we can. 

Colouring whole box

To colour the whole box you need to put CSS into the html

<style type="text/css">#s-lg-box-collapse-13297230 { background-color: #f2dede;}</style>

where the number is the number of the box and the colour is the one you want.