Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Laxman VattamLaxman Vattam 

Showing classic VF page with Lightning look

Is there any way to cutomize classic visualforce page to look like lightning VF page (without to switching to lightning)? 

My requirement is to build a new VF page that is about to be used in salesforce classic but the styling should be like lightning.

 
Nikhil Sharma 17Nikhil Sharma 17
Yes you can create VF page to look like lightning.
just add the lightning design sytem css or install the package. and include the css in your VF page.
https://www.lightningdesignsystem.com/resources/downloads/
Adrian GawryszewskiAdrian Gawryszewski
That's one of the options. The other one is to use Bootstrap and all the fancy stuff it has to offer. 

But if you want to stick to the first solution just add:  
<apex:page sidebar="false" standardStylesheets="false"> 
<apex:stylesheet value="/resource/SLDS0102/assets/styles/salesforce-lightning-design-system-ltng.css"/>

<div class="slds">
   ...some content here ...
</div>
</apex:page>

And job done!
Adrian GawryszewskiAdrian Gawryszewski
Of course first download lightning design system and add it to static resources. Forgot to mention it in the previous post :)
Pradip Kr. ShuklaPradip Kr. Shukla
Hi Laxman,

You can use SLDS to design your VF page and if you want to show your same VF page in lightning as well as in classic then plz go through with below trailhead link

https://trailhead.salesforce.com/en/modules/lex_dev_visualforce/units/lex_dev_visualforce_multipurpose_pages

For SLDS , plz follow below link
https://lightningdesignsystem.com/downloads/
https://lightningdesignsystem.com/utilities/alignment/

I hope this will help you.

Thank you.
Richard Clark 44Richard Clark 44
Or you can just wait until Winter 18 and use the new apex:page lightningStylesheets="true" parameter to auto-convert your standard VF components :D
Richard Clark 44Richard Clark 44
(and yes, it will be Classic in Classic and Lightning in Lightning)
Stéphane VinuesaStéphane Vinuesa
Hi, VisualForce pages do support Lightning Experience Stylesheets since Summer '18.
https://releasenotes.docs.salesforce.com/en-us/summer18/release-notes/rn_vf_lightningstylesheets_custom_themes.htm

Enjoy
Mark Hartnady 28Mark Hartnady 28
Since Winter '18 release you can add the following to render your custom VF page with a Lightning look & feel (when in Lightning): 
<apex:page lightningStylesheets=“true”>
If you are NOT in Lightning however, and want your VF page to appear as Lightning you will need to use the method previously supplied in this thread, namely: 
<apex:page sidebar="false" standardStylesheets="false">
<apex:stylesheet value="/resource/SLDS0102/assets/styles/salesforce-lightning-design-system-ltng.css"/>
Joseph OlatiregunJoseph Olatiregun
I have two questinos:
1.  I have followed the instructions above with uploading to the static resources but I'm still having issues. The styling is not applied to the page.
2.  I tried using lightningStylesheets=“true” it worked within the context off the org but when I make the page public and access it through a force.com site it reverts back to the classic view. Is there a way to make lightningStylesheets=“true” work with public sites too?
  
<apex:page standardController="Account" sidebar="false" standardStylesheets="false">
<apex:stylesheet value="/resource/SLDS0102/assets/styles/salesforce-lightning-design-system-ltng.css"/>
    
    <apex:pageBlock title="Account Summary">
        <apex:pageBlockSection >
            
            Name: {! Account.Name } <br/>
            Phone: {! Account.Phone } <br/>
            Industry: {! Account.Industry } <br/>
            Revenue: {! Account.AnnualRevenue } <br/>
            Account owner: {! Account.Owner.Name } <br/>
            
        </apex:pageBlockSection>
    </apex:pageBlock>
    
</apex:page>

User-added image

 
Hema A 1Hema A 1
I am facing the exact problem that Joseph is facing. When I preview the VF page it is displaying in lightning stylesheet, whereas when preiewed from Sites it goes back to Classic. Can anyone help with any work around. or if I am missing anything in the public access setting.
salesforce developer 371salesforce developer 371
Mark Hartnady 28

Thanks Bro
 
Lewis HowelLewis Howel
Hi all,

I need to make mine lightning look (working in lightning experience). Can anyone help?

<apex:page >
          
    <h1>Latest Updates</h1>
    
    <chatter:feed entityId="0F93N0000004D4NSAU"/>  
    
</apex:page>
Lewis HowelLewis Howel
I have found some more, so have tried adding it but still not working:

<apex:page >
      
    <apex:slds />
    
    <div class="slds-scope">
          
    <h1>Latest Updates</h1>
    
    <chatter:feed entityId="0F93N0000004D4NSAU"/>
    
    </div>
          
</apex:page>