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.

Remove the border from a tile

You can remove the border from a tile using the code below. You need to change the page ID (#pageid-1) and the tile ID (data-gs-id="od-gs-1) - the code below is targeting the home page (ie page 1).

To find out the page and tile number:

  • visit the page you want to edit
  • open the chrome console (F12) and click on the Elements tab
  • the page number should be highlighted on the white bar underneath the page code - if it isn't you can use Find (Ctrl-F) then type the code #pageid
  • the tile number can be found by using Find (Ctrl-F) and typing the code od-gs - as you cycle through each element the tile will be highlighted
/*remove the border from page x tile x*/
#pageid-1 #od-content-container:not(.od-designing) [data-gs-id="od-gs-1"] .od-pb-panel, #pageid-1 #od-content-container:not(.od-designing) [data-gs-id="od-gs-1"] .od-pb-panel-heading, #pageid-1 #od-content-container:not(.od-designing) [data-gs-id="od-gs-1"] .grid-stack-item-content { border-width: 0 !important; }

Hide the breadcrumb bar

You can hide the breadcrumb bar on any page from Page Settings > Layout, but this code will allow you to hide it for all pages.

/*hide breadcrumb bar*/
.od-breadcrumb-container {display: none;}

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;}

Include a separate CSS file

Text files (and images) on your site can be accessed directly by inserting /assets/bypath at start of the URL.
Important: @import statements need to be at the top of the CSS input box.

@import url("/assets/bypath/assets/css_/sample.css");


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!