+ Start a Discussion

Style Visualforce Field

I am a noob to Visualforce. Basically, I am pulling in the 18 Digit Contact ID via a Salesforce Page and am trying to figure out how to style the field to match the rest of the standard page layout. Even though I am using the standardStylesheet, the field does not inherit styling (field label right aligned, field text left aligned, etc.). Any help with the below code is much appreciated:


<apex:page standardController="Contact" standardStylesheets="true"> <style type="text/css"> body {background: #F3F3EC; font-style: arial; } </style> <apex:outputLabel >Contact ID</apex:outputLabel> <apex:outputfield value="{!Contact.Id}" /> </apex:page>



To get the standard style and layout you need to put in a pageblock section:



<apex:page standardController="Contact" standardStylesheets="true"> <apex:pageBlock> <apex:pageBlockSection> <apex:outputfield value="{!Contact.Id}" /> </apex:pageBlockSection> </apex:pageBlock> </apex:page>

 You also don't need the outputLabel if you do it this way. If you don't want the section then use this code plus a browser CSS inspector to see what classes SFDC use to format it and apply that to your inline style.