1

I downloaded SLDS and saved as a static resource. Then I applied the style on Visualforce page, but it's not working. How can I apply SLDS on Visualforce Page?

Lightning Design System Static Resource https://lightningdesignsystem.com/resources/downloads/

I tried tag '<apex:slds /> ', but it's not working in community page. I want to apply slds on Visuforce Page in community page.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<head>    
    <apex:stylesheet value="{!URLFOR($Resource.slds2_12_2, 'styles/salesforce-lightning-design-system.css')}"/>
</head>
<div class="slds">
    <apex:form id="form">
        <div class="slds-modal__header">
            <h2 class="slds-text-heading--medium">SLDS On Visualforce page</h2>
        </div>
        <div class="slds-modal__content slds-p-around--medium">
            <apex:commandLink value="">
                <button type="button" class="slds-button slds-button--brand">Cancel</button>
            </apex:commandLink>
        </div>
    </apex:form>
</div>
</apex:page>

enter image description here

I tried the code below, but there is the differences between the normal Vf page and the enbeded Vf page in community.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html>
    <body>
        <apex:slds />
        <apex:form id="form" styleClass="slds-scope">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading_medium">SLDS On Visualforce page</h2>
            </div>
            <div class="slds-modal__content slds-p-around_medium">
                <apex:commandLink value="Cancel" styleClass="slds-button slds-button_brand"></apex:commandLink>
            </div>
        </apex:form>
    </body>
</html>
</apex:page>

Normal Vf page (not community) enter image description here

enbeded Vf page in community enter image description here

Improve this question
5
  • I tried <apex:slds />, but it's not working on community page.
    – nat18
    Commented Sep 16, 2020 at 16:16
  • To confirm, you dropped an Visualforce component into your Lightning Community page or are you using an older Site?
    – nbrown
    Commented Sep 16, 2020 at 17:20
  • I dropped an Visualforce page into my Lightning Community page.
    – nat18
    Commented Sep 16, 2020 at 17:28
  • Did you add the slds-scope class to your page over content you want to style?
    – nbrown
    Commented Sep 16, 2020 at 17:37
  • check the example I added to my answer
    – nbrown
    Commented Sep 16, 2020 at 17:51

1 Answer 1

Reset to default
3

Downloading the CSS and re-uploading it as a static resource is unnecessary. You can use the SLDS stylesheets by adding the <apex:slds /> tag to your Visualforce page. This is documented on the SLDS site under Visualforce, the download is offered if you want to use the CSS outside of Salesforce.

You can also scope where you want the SLDS styles to be applied.

<apex:page standardController="Account" applyBodyTag="false">
    <apex:slds /> 
 
    <!-- any Visualforce component should be outside SLDS scoping element -->
    <apex:outputField value="{!Account.OwnerId}" /> 
 
    <div class="slds-scope">
    <!-- SLDS markup here -->
    </div>
</apex:page>

Additionally, make sure you're using the appropriate markup for the SLDS class names. Many of the classes that use double hyphens (--) have been deprecated.

EDIT

This example works in a Community Visualforce component.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html>
        <body>
            <apex:slds />
            <apex:form id="form" styleClass="slds-scope">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading_medium">SLDS On Visualforce page</h2>
                </div>
                <div class="slds-modal__content slds-p-around_medium">
                    <apex:commandLink value="Cancel" styleClass="slds-button slds-button_brand"></apex:commandLink>
                </div>
            </apex:form>
        </body>
    </html>
</apex:page>
Improve this answer
4
  • The tag '<apex:slds />' is working normal Visualforce page but, it's not working in community.
    – nat18
    Commented Sep 21, 2020 at 7:56
  • The VF page will render in an iframe, there should be no differences between what you see by navigating to the page directly (at /apex/MyPage) vs what you see when you drag and drop the Visualforce page into the Community as a component. Can you share the code that you're currently using so we can help troubleshoot it?
    – nbrown
    Commented Sep 22, 2020 at 12:39
  • thank you for your answer. I tried the code you showed.(I updated my question and add the images) It's working if it's not in community, but it's not working in community.
    – nat18
    Commented Sep 22, 2020 at 13:21
  • I'm not sure what the issue could be based on what you've shared. I would post a new question specific to the new issue you're having i.e. lightning stylesheets are not applied to a Visualforce page rendered in a Lightning Community
    – nbrown
    Commented Sep 22, 2020 at 16:03

You must log in to answer this question.

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