Salesforce1 look and feel. Customise Visualforce Pages for Salesforce1

February 16, 2014 by Ashwani 2 Comments

Salesforce1 has been launched during Dreamforce ’13 and with this a new and very essential way to connect with customers has opened for all. This is the mobile device accessibility.  Salesforce has provided a complete customisation of Force.com platform to make itself compatible to mobile devices e.g; smartphones, tablets etc.

Now all the essentials features of Salesforce platform are available to mobile devices like accessing Salesforce’s object records, creating new record and various other native functionalities. But what about the custom functionality which are provided using custom Visualforce pages, inline visualforce pages? Answer to this question is Publisher actions and mobile cards. But it is rare that custom Visualforce page has compatibility to mobile device from UI/UX point of view.

Salesforce has not provided any CSS styles to make Salesforce1 look and feel. But here are some instructions and CSS style which can be helpful in providing Salesfroce1 like UI to Visualforce pages.

First thing to remember when creating visualforce page mobile devices is do not set width of the container in pixels. If width page is set in pixels it will be fixed and will look awkward on small screen devices and can overflow screen dimensions. For ex: A page having container width 960px will overflow on a device which has 480px resolution. Instead of providing width in pixels provide width in percentage %. Also all components inside the container must have width in percentage if there are any chances that component can overflow the screen. Components dimension must be provided by considering the smallest screen device.

Salesforce1 Custom Visualforce Page

On Visualforce pages Pageblock , PageblockSection, PageblockSectionItem frequently used. These components are good for non-mobile devices but on mobile they looks awkward and looks very small and uncomfortable. Following components must not be used on Salesforce1 compatible pages and Salesforce1 don’t recommend them to use:

<apex:pageBlock> 
<apex:pageBlockButtons> 
<apex:pageBlockSection> 
<apex:pageBlockSectionItem> 
<apex:pageBlockTable>

Following native apex tags can be used but may not support Salesforce1 look and feel.

<apex:input>
<apex:inputField>
<apex:inputText>
<apex:outputText>
<apex:outputLabel>

Now the Question arises that how we can make Salesforce components of same look and feel like Salesforce1. So here are some CSS styles to provide similar look:

For input text and textarea add the following css style:

.sf1input, .sf1textarea{
width:100%;
font-family: 'ProximaNovaSoft-Regular','Helvetica Neue;
font-size: 15px;
color: #3c3d3e;
padding: 7px 14px;
line-height: 25px;
border: 1px solid #cfd0d2;
border-radius: 5px;
background-color: #e8eaeb;
box-shadow: inset 0 2px 2px rgba(0,0,0,.07);
margin:2px 20px 2px 2px;
}

.sf1input:focus, .sf1textarea:focus {
border: 1px solid #bbc0c4;
background-color: #fff;
outline-style: none;
}

For SelectOption list following CSS style used:

.sf1select {
 -webkit-appearance: none;
 border: 1px solid #bbc0c4;
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=);
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=),-moz-linear-gradient(#ffffff,#f1f1f1);
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=),-webkit-linear-gradient(#ffffff,#f1f1f1);
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=),-ms-linear-gradient(#ffffff,#f1f1f1);
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=),linear-gradient(#ffffff,#f1f1f1);
 background-repeat: no-repeat;
 background-position: 95% 50%;
 background-size: 16px 16px,100% 100%;
 color: #3c3d3e;
 padding: 7px 14px;
 line-height: 25px;
 font-family: 'ProximaNovaSoft-Regular', 'Helvetica Neue';
 font-size: 15px;
 width: 100%;
 padding: 7px 14px;
 margin:2px 20px 2px 2px;
 border: 1px solid #cfd0d2;
 border-radius: 5px;
 }

For Salesforce1 like checkbox:

.sf1input[type="checkbox"] {
-webkit-appearance: none;
display: inline-block;
height: 22px;
margin: 0 6px 0 0;
border: 1px solid #c3c6c9;
padding: 0;
width: 22px;
vertical-align: middle;
background: white -webkit-linear-gradient(bottom,rgba(0,1,1,0.05) 0,rgba(255,255,255,0.05) 100%);
box-shadow: 0 1px 0 rgba(0,0,0,0.05),inset 0 0 1px 1px white;
}

.sf1input[type="checkbox"]:checked {
border: 1px solid #2c75a3;
background-color: #3b9fdd;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);
-moz-box-shadow: 0 0 2px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);
box-shadow: 0 0 2px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);
background-image: -webkit-gradient(linear,50% 100%,50% 0,color-stop(0,#3b9fdd),color-stop(100%,#3b9fdd));
background-image: -webkit-linear-gradient(bottom,#3b9fdd 0,#3b9fdd 100%);
background-image: -moz-linear-gradient(bottom,#3b9fdd 0,#3b9fdd 100%);
background-image: -o-linear-gradient(bottom,#3b9fdd 0,#3b9fdd 100%);
background-image: linear-gradient(bottom,#3b9fdd 0,#3b9fdd 100%);
}

.sf1input[type="checkbox"]:checked::after {
display: block;
left: 3px;
top: 3px;
height: 6px;
width: 10px;
border-bottom: 4px solid white;
border-left: 4px solid white;
-webkit-transform: rotate(-45deg);
position: relative;
content: '';
}

Salesforce1 like label following css can be used:

.sf1label {
font-family: 'ProximaNovaSoft-Regular','Helvetica Neue';
font-size: 13px;
color: #696e71;
margin: 0;
padding-bottom: 8px;
display: block;
min-width: 100px;
}

UI Buttons. There are two types of buttons used by Salesforce1. White and Blue.
For White button which is SF1 use for CRUD operation like Edit, Delete, Clone etc. following css can be used:

.sf1button {
font-size: 16px;
color: #44596c;
text-shadow: none;
margin: 0;
padding: 4px 14px;
height: 35px;
font-size: 16px;
font-family: 'ProximaNovaSoft-Regular';
font-weight: normal;
border: 1px solid #bbc0c4;
border-radius: 5px;
background: -moz-linear-gradient(#ffffff,#f1f1f1);
background: -webkit-linear-gradient(#ffffff,#f1f1f1);
background: -ms-linear-gradient(#ffffff,#f1f1f1);
background: linear-gradient(#ffffff,#f1f1f1);
box-shadow: none;
text-align: center;
cursor: pointer;
box-sizing: border-box;
}

.sf1button:active {
background: #e9e9e9;
}
Blue button:
<pre>.sf1buttonSFBlue {
 font-size: 16px;
 color: #44596c;
 text-shadow: none;
 margin: 0;
 padding: 4px 14px;
 height: 35px;
 font-size: 16px;
 font-family: 'ProximaNovaSoft-Regular', 'Helvetica Neue';
 font-weight: normal;
 border: 1px solid #bbc0c4;
 border-radius: 5px;
 background: -moz-linear-gradient(#2a93d5,#107abb);
 background: -webkit-linear-gradient(#2a93d5,#107abb)
 background: -ms-linear-gradient(#2a93d5,#107abb);
 background: linear-gradient(#2a93d5,#107abb);
 box-shadow: none;
 text-align: center;
 cursor: pointer;
 box-sizing: border-box;
 color:white;
 }

Salesforce1 List View can be created with ordered-list and <li> tag. Suppose list is created as:

<ol>
      <apex:repeat value="{!oppList}" var="op">
         <li class="sf1List">
           <a>
                {!op.name}
            </a>
         </li>
         </apex:repeat>
</ol>

So following CSS style can be used to makes Salesforce1 like list:

Salesforce1 List View

.sf1List {
margin: 0;
display: list-item;
padding: 14px;
border-bottom: solid 1px #cfd4d9;
list-style: none;
font-size: 16px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: rgb(60, 61, 62);
}

.sf1List:first-child {
border-radius:4px 4px 0px 0px;
}

.sf1List:last-child {
border-radius:0px 0px 4px 4px;
border-bottom:none;
}

ol {
background-color:rgb(230, 230, 230);
list-style: none;
margin: 0;
padding: 0;
margin-top:5px;
border-radius:4px;
border:solid 1px #cfd4d9;
}

.sf1List a {
text-decoration: none;
color: rgb(60, 61, 62);
}

Using above css style we can make our Visualforce similar to Saleforce1. However there are some other things remain like Date field, Sections and layouts those are possible by Javascript only. They are in development and will be available soon. For now a basic solution has been provided.

Next question is how to get images/icons like Salesforce1 to use in Visualforce page. Salesforce UI/UX team has exposed this on Heroku http://sfdc-styleguide.herokuapp.com/ contains all icons used in Salesforce1 mobile app.

Advertisement