function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Pulse CentersPulse Centers 

VF Page to look like Lightning Layout using Static Resource


This is my first attempt at building a VF page, so the code may not be formatted properly. But, I have been able to get everything to layout the way I need it to and to pull the data needed. However, It looks awful. The page will be displayed in SF classic, but I want it to look like the lightning layout. I followed the instructions to install the zip file as a static resource, but I still can't get the sytle to change. Any help with this would be greatly appreciated.

Here is my VF page code:

<apex:page standardController="Account" sidebar="true" showHeader="true" showChat="false" standardStylesheets="false">
<html xmlns="" xmlns:xlink="">
<apex:stylesheet value="{!URLFOR($Resource.Lightning_CSS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

<div class="slds">

<apex:panelGrid columns="2" width="100%" border="0" styleClass="tableStyle" columnClasses="colStyle1,colStyle2" rowClasses="rowstyle">
    <apex:detail relatedList="false" title="true" inlineEdit="true"/>
           <chatter:feed entityId="{!Account.ID}"/>
   <apex:tabPanel switchType="client" selectedTab="tabdetails"
                  id="AccountTabPanel" tabClass="activeTab"
      <apex:tab label="Contacts" name="Contacts" id="tabContact">
         <apex:relatedList subject="{!account}" list="contacts"/>
      <apex:tab label="Opportunities" name="Opportunities"
         <apex:relatedList subject="{!account}"
                           list="opportunities" />
      <apex:tab label="Assets" name="Assets"
         <apex:relatedList subject="{!account}"
                           list="Assets" />
      <apex:tab label="Cases" name="Cases"
         <apex:relatedList subject="{!account}"
                           list="Cases" />
      <apex:tab label="OpenActivities" name="Open Activities"
 <apex:relatedList subject="{!account}"
                           list="OpenActivities" />
      <apex:tab label="Notes and Attachments"
                name="NotesAndAttachments" id="tabNoteAtt">
         <apex:relatedList subject="{!account}"
                           list="CombinedAttachments" />
Best Answer chosen by Pulse Centers
The <apex:relatedlist> tag are not supported in salesforce lightning design system, you have to use the markup style outlined in the lightning design system. Check this link to know more about details -