To add further styling to your Overdrive site, paste these snippets into the CSS box in Site Settings > Developers or Page 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.

Site Level

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

Prevent the site logo from linking to Home

This code will stop users from being able to visit the home page by clicking on the site logo.

/*disable logo link*/
#od-brand{pointer-events: none;}

Remove borders and background from Icon Views

This code will remove the borders and backgrounds from folders and files when in icon views

/*remove icon view borders and backgrounds*/
[od_plstg_folder_options_iconborder="0"] .thumbnail{ background-color: transparent; }

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");

Page Level

Remove the banner

If you have banner set to ON in Template Designer but want to remove it from certain pages, this code will remove the banner from the active page.

/*remove banner*/
#od-banner-outer, .od-banner {display: none;}

Set the banner height

If you have the banner set to ON in Template Designer but need to change the height of it on a page (eg the Home page), this code will change the height of the banner on the active page.

/*change banner height*/
#od-banner-outer, .od-banner{height: 500px;}

Add a banner to a page

If you have the banner set to OFF in Template Designer but want the banner to show on a page, this code will add a banner to the active page. The styling can then still be set via Template Designer.

/*add banner to a page*/
#od-banner, #od-banner-outer {
    display: flex;
    min-height: 100px;
}

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 the developers tab.

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!

Advanced

Style your site with CSS