4

In Lightning when I click new account button or new contact button a Lightning styled page appears in the form of popup. However, when I override this button, because I want my custom page for creating new account or contact to appear, it does not look like Lightning styled and it is even not a popup. Here is a part of code of my page:

<apex:page standardController="Account" extensions="NewAccountController">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<apex:stylesheet value="{!URLFOR($Resource.SLDS202, 'assets/styles/salesforce-lightning-design-system.css')}" />
   <div class="slds">

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <input id="id" class="slds-input" type="text" 
                value="{!id}" />
            </div>
        </div>

   </div>
</html>
</apex:page>

As you see I try to make VF page look like Lightning. Can you tell me what am I missing, why this page does not appear in Lightning style?

1 Answer 1

2

Generally you have to include 3 css files: salesforce-lightning-design-system.min.css, salesforce-lightning-design-system-ltng.min.css and salesforce-lightning-design-system-vf.css. Try adding the last one.

Working code, it was not necessary to include others css:

<apex:page standardController="Account" extensions="NewAccountController">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<apex:stylesheet value="{!URLFOR($Resource.myStaticResource, '/slds/assets/styles/salesforce-lightning-design-system.min.css')}" />
   <div class="slds">

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <input id="id" class="slds-input" type="text" 
                value="{!id}" />
            </div>
        </div>

   </div>
</html>
</apex:page>
3
  • What I'm trying to do is create my custom Modal (for new account or new contact), example: lightningdesignsystem.com/components/modals I included css you suggested: <apex:stylesheet value="{!URLFOR($Resource.SLDS202, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" /> Even when I copy code from this example I don't obtain a Modal. I don't know what I'm missing to obtain Lightning look.
    – rmatusiak
    Aug 1, 2016 at 14:23
  • Is posible you forgot to add /slds/ in your apex:stylesheet declaration? I will update my answer with the working code for me.
    – D. Cruz
    Aug 1, 2016 at 14:35
  • Where can i get those css files? When i use the line 3 from example provided. Jun 21, 2019 at 13:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .