Customize the Right Side of the Salesforce Login Page with Visualforce Page

Salesforce consultants per business requirements, often face the challenge to customize the login page in their new environments. While searching the internet where to start and the wast answers, it's unclear where to start and what specifically they need to do. In this post I will try to explain you exactly how you can use the unlimited potential of the Salesforce platform and make this possible.

For this example we will focus inside the platform and as a consultant you don't need to do anything outside of the Salesforce platform.

Create a Static Resource

First thing first, we need to create a Static Resource where we will place our image. Salesforce suggest we use 1050px width and 850px height when we wan't to create this image.

1. Go to Setup
2. Press Home
3. Go to Static Resources
4. Create New Resource
5. Write a Name for the static resource. In our case we use landingImage.
6. Write a Description (optional)
7. Find your image file.
8. Put Cache Control to Public

See images below.

Create a Visualfoce page

Now that you have created your static resource we need to place that in a Visualforce page that later we can use to place it in the section.

1. Go to Setup
2. Press Home
3. Go to Visualforce Pages
4. Create New visualforce page, for our example we will name it LoginPage
5. Write your visualforce page custom code. Remember that landingImage is the StaticResource used in the code.

<apex:page showHeader="false" cache="false">
<apex:image url="{!URLFOR($Resource.landingImage)}" styleClass="img"/>
</apex:page>

Create a custom Force.com site page

After the creation of the static resource and the visualforce page we need to create a force.com site page.

1. Go to Setup
2. Press Home
3. Go to Site
4. Create a new Site
5. Add Site Label and Site Name
6. Use your above created Visualforce page name in "Active Site Home Page".
7. Make Sure, "Clickjack Protection Level" should be "Allow framing by any page (No protection)".
8. Fill other details
9. Activate the Site
   

Setup your Site to Right Frame URL

When we are done with the Site, we need to go back to Setup> Home > Site and scroll to the bottom of the page. On the new Site page copy your Site Url. This URL we will use it to do the final step.

1. Go to Setup
2. Press Home
3. Go to My Domain and scroll down to the "Authentication Configuration". Click Edit.
4. In the "Right Frame URL": paste the url that we copied from above, and make sure that "https" and the append "/" at the end of the URL.
   Example: https://yourDomainName.secure.force.com/
5. Press Save and go to your custom domain URL.
   

Result

The final result will look like this

I hope this post will make your Salesforce Consultant life more easier.