+ Start a Discussion
Neha LundNeha Lund 

Can we remove the blue header of the page Block in visual force page ?

Best Answer chosen by Admin (Salesforce Developers) 
kiranmutturukiranmutturu
<apex:page>
<apex:pageBlock mode="maindetail">
</apex:pageBlock>

</apex:page>

All Answers

Avidev9Avidev9

Yes you can use the Mode attribute of the pageblock.

try using mode="edit" or mode="maindetail" .

From the component reference
The default user mode for the pageBlock component's child elements. This value determines whether lines are drawn separating field values. Possible values are:

  • detail -- data is displayed to the user with colored lines.
  • maindetail -- data is displayed to the user with colored lines and a white background, just like the main detail page for records.
  • edit -- data is displayed to the user without field lines.
  • inlineEdit -- data is displayed as in detail mode, but child components that support it are enabled for inline editing.

Displayed lines have nothing to do with requiredness, they are merely visual separators, which make it easier to scan a detail page. If not specified, this attribute defaults to detail.

 

PS: will suggest you to go through the documentation. http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_pageBlock.htm

Neha LundNeha Lund

Hi Avi,

 

Just try this code

 

<apex:page>

<apex:pageBlock>

</apex:pageBlock>

<apex:page>

 

I want to remove the blue box which comes there

 

Can it be achieved ?

 

Avidev9Avidev9

THere is a Blue bar ?
Try this
<style>
.bPageBlock {
border-top: 0px;
}
</style>

 

Or try changing the mode to maindetail

kiranmutturukiranmutturu
<apex:page>
<apex:pageBlock mode="maindetail">
</apex:pageBlock>

</apex:page>
This was selected as the best answer
Neha LundNeha Lund

Hi,

 

Well I cannot see any style class attribute to associate with page block

 

I feel we cannot remove it

 

Neha LundNeha Lund

I was talking about blue bar not header.

 

Thanks anyways

Avidev9Avidev9
Just add this into the page


<apex:page>
<style>
.bPageBlock {
border-top: 0px;
}
</style>
<apex:pageBlock mode="maindetail">
</apex:pageBlock>

</apex:page>
Neha LundNeha Lund

Thanks, It worked fine

:)