How to make apex:pageblock background white?

How to make apex:pageblock background white?

Syntax:


<apex:pageblock mode=”maindetail”>

Example:


Visualforce page:

<apex:page controller=”Sample” sidebar=”false” >
<style type=”text/css”>
    .hideButton{display:none;}
</style>
<chatter:feedWithFollowers entityId=”{!contactDetail.Id}”/><apex:form >   
    <apex:pageblock title=”Contact Detail” mode=”maindetail”>
        <apex:pageblockSection columns=”4″ >
            <apex:pageblockSectionItem >
                Contact First Name:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.FirstName}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>
            </apex:pageblockSectionItem>   
            <apex:pageblockSectionItem >
                Contact Email:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.Email}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>               
            </apex:pageblockSectionItem>  
            <apex:pageblockSectionItem >
                Contact Last Name:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.LastName}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>               
            </apex:pageblockSectionItem>             
            <apex:pageblockSectionItem >
                Contact Mobile Number:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.MobilePhone}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>               
            </apex:pageblockSectionItem>  
            <apex:pageblockSectionItem >
                Account:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.AccountId}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>               
            </apex:pageblockSectionItem>                        
            <apex:pageblockSectionItem >
                Contact Phone Number:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.Phone}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>               
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
                Department:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.Department}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>               
            </apex:pageblockSectionItem>            
            <apex:pageblockSectionItem >
                Other Phone:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.OtherPhone}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>               
            </apex:pageblockSectionItem>   
            <apex:pageblockSectionItem >
                Description:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.Description}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>               
            </apex:pageblockSectionItem>                                 
            <apex:pageblockSectionItem >
                Fax:
            </apex:pageblockSectionItem> 
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.Fax}”>
                    <apex:inlineEditSupport event=”ondblclick” showOnEdit=”Save,Cancel” hideOnEdit=”Edit”/>
                </apex:outputField>                            </apex:pageblockSectionItem>                                                                                                                                      
        </apex:pageblockSection> 
        <apex:pageBlockSection title=”System Information” columns=”4″ >
            <apex:pageblockSectionItem >
                Created By
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.CreatedById}”/>
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
                Last Modified By
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
                <apex:outputField value=”{!contactDetail.LastModifiedById}”/>
            </apex:pageblockSectionItem>           
        </apex:pageBlockSection>     
        <apex:pageblockButtons >
            <apex:commandButton value=”Edit” id=”Edit” action=”{!Editcontact}”/>
            <apex:commandButton value=”Save” id=”Save” styleClass=”hideButton” action=”{!updateContact}” />
            <apex:commandButton value=”Cancel” id=”Cancel” styleClass=”hideButton”/>
        </apex:pageblockButtons>       
    </apex:pageblock>
</apex:form>
</apex:page>



Apex Controller:

public class Sample
{  
    public Contact contactDetail {get;set;}
    public Id contactId = ‘0039000000PsPW6’;
    public sample()
    {
        contactDetail = [SELECT Id, LastName, FirstName, AccountId, Email, MobilePhone, Phone, Department, Fax, ReportsTo.Name, OtherPhone, Description, CreatedById, LastModifiedById FROM Contact WHERE Id =: contactId ];
    } 
    public void editContact()
    {
    }
    public void updateContact()
    {
        update contactDetail;
    }
}



Output:

Leave a Reply