Advanced ShareFile Login Page Customisations

Most of us are used to the built in wizard within ShareFile for branding the site. The Wizard takes around 5 minutes to configure and does the job. However, if you are fussy like me the login page leaves me somewhat underwhelmed. This blog article will take you through how to create an awesome looking homepage with little HTML knowledge.

ShareFile Login – Created using Wizard

ShareFile Login – Created using This Blog

ShareFile After

Step 1 – Custom Split Login Page

For users of ShareFile who have used SSO / SAML authentication will be familiar with the split login page that you are required to modify and replace the standard login page. We are going to use this as a basis for our ShareFile login page.

ShareFile Split Screen

 

Note: Using the custom login page will prevent you utilising the two-step-verification feature within ShareFile.

Download and deploy the split login page to your ShareFile site as per the following article:

https://support.citrixonline.com/en_US/ShareFile/all_files/SF090016#
(This will not make any changes to your production site at this point)

I suggest testing your site as you go along. Upload your files into the customizations folder and test them using the following URL: https://YOURDOMAIN.sharefile.com/customlogin.aspx

Step 2 – Remove Employee Login Section

Skip this section if you are using SSO and want to retain the Employee Login section.

Find the following section of code and either remove or comment it out (I have commented it out in the example below)

ShareFile

We are now left with the right pane aligned to the left of the screen. We need to centre this and as a result will need to modify the .right class.

Find the following piece of code on line 28:

ShareFile

and change it to:

.right { height: 452px; width: 328px; margin: auto; margin-top: 125px; display: block;  }

This has now aligned the login to the centre of the screen and removed the thin boarder on the left.


ShareFile

Step 3 – Background Image and Main Logo

Here is the location of the code to configure the background:

ShareFile

I’m going to create a new background image and call it sharefileBG.png, this will need to be uploaded to the Customizations folder we created in Step 1. I am also going to change the background size to “cover”. The Scale function will make the background image as large as possible so that the area is completely covered by the image. Some parts of the background image may not be in view within the background positioning area depending on the size of the screen used. I suggest only using this option with large background images that are designed to scale in and out.

You can view the different settings available for the background-size class here:
http://www.w3schools.com/cssref/css3_pr_background-size.asp

body { background-image: url({{sharefileBG.jpg}}); background-size: cover; background-repeat: no-repeat; }

In order to modify the main logo, you will need to locate and modify the following piece of code:

ShareFile

Simply replace the text testlogo.png to the name of your logo that you have uploaded to the Customizations folder. The logo has a fixed size of Height 78px by Width 290px. If you wish to have your logo larger then modify those values to match that of your image.

Due to the way the page has been coded (div/layers) you may find that your logo overlaps the login area below it. This can be remediated by simply adjusting the margin-top value on the .right class from earlier:

.right { height: 452px; width: 328px; margin: auto; margin-top: 75px; display: block;  }

In my example I have decided to align my company logo to the top left of the screen. As a result, I have had to change the main width of the master frame from 900 pixels to 100%

See code below:

.main { width: 100%; margin: auto; }
.title { background: url({{sharefileLogo.png}}) no-repeat; margin: auto; height: 142px; width: 450px; margin-top: 40px; margin-left: 40px; }

Your page should now look something like this:

ShareFile

Step 4 – Refining the Login Area

The Client login Text is quite dark compared to the background so i’m going to change the colour by modifying the h1 and h4 tags.

ShareFile

I have changed the colour on the h1 tag to light grey and also added in a colour option on the h4 tag (#ffffff is white):

h4, label { font-size: 16px;  color: #ffffff; padding-bottom: 15px; font-weight: bold; }

If you want to remove the Client Login title and padlock logo this can be done by commenting out or deleting the following line:

ShareFile

 

Remove Lower Line
In order to remove the small line that appears between the login button and the password you will need to remove or modify the following piece of code:

ShareFile

Change boarder-top … to boarder-top: none

I have also modified the margin values in order to push the login button up a bit closer to the password box.

#btnLogin { background:url({{login.png}}); height: 109px; width: 327px; margin: 0px 0px 0px 0px; cursor: pointer; border-top: none; border-right: none; border-left: none; border-bottom: none; background-position: center 40px; background-repeat: no-repeat; }

If you want to change the login button for an icon you have created, you can do this by replacing the login.png image to one of your choice.

Set Domain in Forgotten Password Link
The final piece to set is your sub domain on the forgotten password link.

ShareFile

Step 5 – Make your page live

In order to make the pages and customisations live you must log a call with ShareFile support and ask them to commit the changes within your customizations folder. This can be done very easily within the Help area of the console (ensure you are logged in as an admin):

ShareFile

Finished Login Screen:


ShareFile After

I hope this blog article has been useful. Feel free to post any comments and questions below.