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

Hi, 

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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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:panelgrid>
   <apex:tabPanel switchType="client" selectedTab="tabdetails"
                  id="AccountTabPanel" tabClass="activeTab"
                  inactiveTabClass="inactiveTab">  
      <apex:tab label="Contacts" name="Contacts" id="tabContact">
         <apex:relatedList subject="{!account}" list="contacts"/>
      </apex:tab>
      <apex:tab label="Opportunities" name="Opportunities"
                id="tabOpp">
         <apex:relatedList subject="{!account}"
                           list="opportunities" />
      </apex:tab>
      <apex:tab label="Assets" name="Assets"
                id="tabAssets">
         <apex:relatedList subject="{!account}"
                           list="Assets" />
      </apex:tab>
      <apex:tab label="Cases" name="Cases"
                id="tabCases">
         <apex:relatedList subject="{!account}"
                           list="Cases" />
      </apex:tab>
      <apex:tab label="OpenActivities" name="Open Activities"
                id="tabopact">
 <apex:relatedList subject="{!account}"
                           list="OpenActivities" />
                           </apex:tab>
      <apex:tab label="Notes and Attachments"
                name="NotesAndAttachments" id="tabNoteAtt">
         <apex:relatedList subject="{!account}"
                           list="CombinedAttachments" />
      </apex:tab>
   </apex:tabPanel>
   </div> 
   </html>            
</apex:page>
Best Answer chosen by Pulse Centers
@Karanraj@Karanraj
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 - https://www.lightningdesignsystem.com/platforms/visualforce/