To add further styling to your OverDRIVE site, paste these snippets into the CSS box in Site Settings > Developers.

If you don`t know CSS, simply copy and paste each snippet (in the grey box) you wish to try out, adding a line space in between each one.

Images

You will need to host your own images on the web. For example you could upload an image to your existing website and then update the link in the examples below from

https://cdn.overdrive.io/images/backgrounds/pixabay.com/blue-88523_1920.jpg

to your hosted link.  Alternatively, use OverDRIVE to host your images.

Add a background image to each page

This code will set an image as the background for every page on your OverDRIVE site - you will need to edit the url so that it points to the image you wish to use. Recommended image size: 2000 pixels wide with a height of 1500 pixels.

TIP: View an image in OverDRIVE and copy the url of the image into this code to use it as the background.

/*add background image to page*/
body{
background-image:url("https://cdn.overdrive.io/images/backgrounds/pixabay.com/blue-88523_1920.jpg");
}

Add a background image to the site banner

This code adds an image to the Banner of your OverDRIVE site, as above you will need to edit the url. Recommended image size: 2000 pixels wide with a minimum height of 200 pixels.

/*add background image to banner*/
div#od-banner {
background-image:url("https://cdn.overdrive.io/images/backgrounds/pixabay.com/blue-88523_1920.jpg"); /*append ?dummy=1&size=w2000 to set the size if needed*/
background-size:cover; /*(Scales the image as large as possible without stretching the image.)*/
}

Hide the breadcrumb bar

This code will hide the breadcrumb bar but keep the action icons on each page, useful if you don`t want the breadcrumb but users need to be able to change views, download files or star items.

/*hide breadcrumb bar but not icons*/
#od-breadcrumb {
visibility: hidden;
}

Remove empty table on pages with no content

This code will stop the Folder tables showing if there is no content on a page.

/*hide empty datatables*/
[od-ajax-records-total="0"] {display:none;}

There is lots more styling that can be done in OverDRIVE if you know CSS or Javascript, just add your code into the relevant boxes in Site Settings > Developers.

If you have some styling or customisation ideas and want to share them with us and other OverDRIVE admins please send your code and description to us at helpdesk@overdrive.io - we will add the best ideas here. If you don`t know CSS but have an styling idea, just send us the description and we`ll get our team onto it for you!