In the previous article we talked about creating a simple visualforce page and adding it to the Right Side URL on our login page in our Salesforce Environments. Here we are going to go further and talk about the customization that we can do and create a responsive Visualforce pages.
Creating a simple visualforce page
For our example we will use a simple HTML and CSS in creation of our responsive visualforce page.
<apex:page showHeader="false" cache="false"> <div> <div> <a href="https://www.trailhead.com" target="_blank"><span>TRAIL </span> <span>A</span><span>HEAD </span><span>TO YOUR </span><span>CERTIFICATE</span></a> </div> <div> <a href="https://www.codestreets.com" target="_blank"></a> </div> </div> </apex:page>
I hope you are already familiar with simple CSS and HTML and we won’t be talking into details about the code above.
Defining the CSS classes
By playing with the code we make our design look cooler and more acceptable for the viewer.
Most importantly is that we add the .responsive class, and in that class we will add our image from @sarahdorweiler, that we will be using for our example.
<style type="text/css"> .responsive { position:relative; background-image:url({!URLFOR($Resource.landingImage)}); background-size:100%; min-height:1800px; background-repeat:no-repeat; } } </style>
Followed by other classes
//the .title_wrapper will be used in our second div tag to set the top text position .title_wrapper{ width:70%; padding-top: 130px; padding-left:40px; } //the title class will be used for our link .title{ font-size:50px; font-family: 'Montserrat', sans-serif; font-weight: normal; color:#114250; text-decoration: none; } //this class is created to override the default style for link .title:hover{ text-decoration: none; color:#114250; } //this class will do the same just on the span and modify the text with right font color and size //when we hover over the text .title:hover .titleSpan{ font-size:50px; font-family: 'Montserrat', sans-serif; font-weight: normal; color:#F3B71A; } //the spanBorder class will put the underline below our CERTIFICATE word .title:hover .spanBorder{ border-bottom: 4px solid #F3B71A; } //the csButton class will add the logo that we have previously added to our static Resources .csButton { background-repeat:no-repeat; background-image:url({!URLFOR($Resource.codeSTREETSLogoWhite)}); height:50px; } //this class will add other version of logo that we have previously added to our static Resources //and it will change on hover .csButton:hover{ background-repeat:no-repeat; background-image:url({!URLFOR($Resource.codeSTREETSLogoGolden)}); height:50px; }
Defining the right font
When we are done with adding the classes to our style, we are going to add our Font that was chosen by the business and stored in the Static Resources, that will fit for different web browsers.
@font-face{ font-family: 'Montserrat'; src: url("{!URLFOR($Resource.MontserratFont)}"); /* IE9*/ src: url("{!URLFOR($Resource.MontserratFont)}") format('embedded-opentype'), /* IE6-IE8 */ url("{!URLFOR($Resource.MontserratFont)}") format('woff'); /* Modern browsers*/ font-weight: 400; font-style: normal; }
Adding @media queries
According to the documentation available for media queries they were introduced in CSS3 and they use the @media
rule to include a block of CSS properties only if a certain condition is true. For our scenarios we want to include the rules for couple of screens ( 1024px, 1440px, 2560px ).In our case, because we use half of the screen for the Right Side of our Salesforce Login Page we need to divide them on half (512px, 720px, 1280px).
@media all and (min-width: 512px) { .csButton { height: 5%; width: 35%; position: absolute; top: 21.5%; left: 66%; background-size: 100%; } } @media all and (min-width: 720px) { .csButton { height: 5%; width: 35%; background-size: 100%; position: absolute; top: 30%; left: 66%; } } // @media all and (min-width: 1280px) { .csButton { height: 5%; width: 35%; background-size: 100%; position: absolute; top: 53%; left: 66%; } }
Include the CSS in the Visualforce page
Our Visualforce page with all the CSS classes added on the corresponding elements, will look like this:
<div class="responsive"> <div class="title_wrapper"> <a href="https://www.trailhead.com" target="_blank" class="title"><span class="titleSpan">TRAIL </span> <span>A</span><span class="titleSpan">HEAD </span><span>TO YOUR </span><span class="spanBorder">CERTIFICATE</span></a> </div> <div> <a href="https://www.codestreets.com" target="_blank" class="csButton"></a> </div> </div>
Final Result
Before hover over the text presented on the Right Side of the Salesforce login page.
With hover over the text presented on the Right Side of the Salesforce Login page. Same goes for the codeSTREETS logo presented on the screen.
Full code
Please note that sometimes the code might not fit your needs and you will need to do some tweaking. Enjoy!
<apex:page showHeader="false" cache="false"> <style type="text/css"> @font-face{ font-family: 'Montserrat'; src: url("{!URLFOR($Resource.MontserratFont)}"); /* IE9*/ src: url("{!URLFOR($Resource.MontserratFont)}") format('embedded-opentype'), /* IE6-IE8 */ url("{!URLFOR($Resource.MontserratFont)}") format('woff'); /* Modern browsers*/ font-weight: 400; font-style: normal; } .responsive { position:relative; background-image:url({!URLFOR($Resource.landingImage)}); background-size:100%; min-height:1800px; background-repeat:no-repeat; } .title_wrapper{ width:70%; padding-top: 130px; padding-left:40px; } .title{ font-size:50px; font-family: 'Montserrat', sans-serif; font-weight: normal; color:#114250; text-decoration: none; } .title:hover{ text-decoration: none; color:#114250; } .title:hover .titleSpan{ font-size:50px; font-family: 'Montserrat', sans-serif; font-weight: normal; color:#F3B71A; } .title:hover .spanBorder{ border-bottom: 4px solid #F3B71A; } .csButton { background-repeat:no-repeat; background-image:url({!URLFOR($Resource.codeSTREETSLogoWhite)}); height:50px; } .csButton:hover{ background-repeat:no-repeat; background-image:url({!URLFOR($Resource.codeSTREETSLogoGolden)}); height:50px; } @media all and (min-width: 512px) { .csButton{ height: 5%; width: 35%; position: absolute; top: 21.5%; left: 66%; background-size: 100%; } } @media all and (min-width: 720px) { .csButton{ height: 5%; width: 35%; background-size: 100%; position: absolute; top: 30%; left: 66%; } } @media all and (min-width: 1280px) { .csButton{ height: 5%; width: 35%; background-size: 100%; position: absolute; top: 53%; left: 66%; } } </style> <div class="responsive"> <div class="title_wrapper"> <a href="https://www.trailhead.com" target="_blank" class="title"><span class="titleSpan">TRAIL </span> <span>A</span><span class="titleSpan">HEAD </span><span>TO YOUR </span><span class="spanBorder">CERTIFICATE</span></a> </div> <div> <a href="https://www.codestreets.com" target="_blank" class="csButton"></a> </div> </div> </apex:page>
Want to learn more?
Learn about Customize the Right Side of the Salesforce Login Page with Visualforce Page
Read more about Customize Your My Domain Login Page with Your Brand & Responsive Web Design – Media Queries
Share this article...
Thank you for the code… it works great as designed but I’m trying to modifiy it to send an email instead of the hyperlink to a website. It keeps openning a new blank browser. Any ideas?
CONTACT YOUR SALESFORCE TEAM HERE
I am not sure if I understood your question correction but I believe you need to remove target=”_blank” from the code if you want to send an email and try using the following code:
example : < a href="mailto:youremail@example.com" rel="nofollow ugc">