Part 3 - Custom Styling

Now that you have been provisioned and can access the 'Datto Drive' app, follow these steps:

 

1) Enabling the 'Custom Theme'

Select the radio button for 'Custom Theme' to reveal the custom styling options below.

 

2) Download the Base CSS

The base CSS has been designed and commented in a way that you will know which section of Datto Drive you are changing the look for.

You will need an application to render the CSS in text so that you can begin editing it.

 

3) Begin Editing the Base CSS

Although you will be able to download the base CSS, it is advisable that for each change you make to the CSS, you save it under a different file name.  Especially if you are making small incremental changes.

 

4) Upload Your New CSS

Once you have made your changes and wish to see how your Datto Drive account looks, it is time to upload your new CSS.

First, click on the 'Upload CSS file' button and then find your CSS file to upload

You should see a display similar to this:

 

The green confirmation bar notifies you to refresh your browser and the changes will be seen.  Note, if you've made changes to your login page, you will have to log out in order to see those changes in effect.

In the above image:

  • 'Version 1' is for the CSS that was just uploaded.  It is not the file name.
  • 'Modified' shows when it was uploaded
  • 'Download' allows you to download this CSS should you need it
  • 'Restore' allows you to use this version of the CSS if you have many versions of the CSS uploaded.  If you restore a previous version, you will NOT lose all CSS files made after that version.
  • 'Delete' allows you to delete this version of CSS if you do not like it.

 

5) Upload Your Images

With the styling in place, you can also upload imagery like a corporate logo to act as the background of the login page or your browser favicon.

Scrolling down the page past the CSS versions, you see the different images you can change.

 

If you have a custom image uploaded and you click on 'Delete Image', the default Datto images will display in their place.

 

6) Resetting Your Changes

In the below image, the CSS was changed where everything in the header was white.

The user is no longer able to see the links for the user account or the apps.  Even though the links are still present, it makes it difficult to even navigate to the 'Datto Drive' app to roll back the changes.

Your Managed Service Provider has a 'reset' button to help you!  If you call them with the need to reset your theme, they can log in to their management portal and reset your theme back to the default base css.

It is important to note that this process is similar to a hard reset.  This will delete all the CSS files you have uploaded.