Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
HNT_NeoHNT_Neo 

How to change the color of the <apex:pageBlockSection>

Hello, 

Can someone help me with chaning the contrast of the <apex:pageBlockSection>? As you can see from the image, the contrast makes the title hard to read. 

Thanks!
User-added image



Best Answer chosen by HNT_Neo
Ramu_SFDCRamu_SFDC
Hi, the post at the link below explains more about customizing the pageblock section header, text color, font size etc..,

https://developer.salesforce.com/forums?id=906F000000098qMIAQ

Hope this helps.

All Answers

Ramu_SFDCRamu_SFDC
Hi, the post at the link below explains more about customizing the pageblock section header, text color, font size etc..,

https://developer.salesforce.com/forums?id=906F000000098qMIAQ

Hope this helps.
This was selected as the best answer
SFDC_DevloperSFDC_Devloper
@JH_Neo

Hope this will help You..  

he following function takes the pageBlockSection and the desired colour then adds that colour to HTML element as a background-color. function colorPageBlock(pageblock, color) { if (pageblock != null) pageblock.firstChild.style.cssText = "background-color: " + color + ";"; }

This is the result:

User-added image
Vf Page:

<pre>
<apex:page standardController="Account">
<script>
function colorPageBlock(pageblock, color) {
if (pageblock != null) pageblock.firstChild.style.cssText = “background-color: ” + color + “;”;

}
</script>
<apex:form>
<apex:pageBlock title="My Content" mode="detail">
<apex:pageBlockSection id="redSection" title="My Content Section" columns="2">
<apex:inputField value="{!account.name}"/>
<script>colorPageBlock(document.getElementById("{!$Component.redSection}"), "red");</script>
</apex:pageBlockSection>

<apex:pageBlockSection id="greenSection" title="My Content Section" columns="2">
<apex:inputField value="{!account.name}"/>
<script>colorPageBlock(document.getElementById("{!$Component.greenSection}"), "green");</script>
</apex:pageBlockSection>

<apex:pageBlockSection id="orangeSection" title="My Content Section" columns="2">
<apex:inputField value="{!account.name}"/>
<script>colorPageBlock(document.getElementById("{!$Component.orangeSection}"), "orange");</script>
</apex:pageBlockSection>
</apex:pageBlock>

</apex:form>

</apex:page>
</pre>

Thanks,
Rockzz
HNT_NeoHNT_Neo
Rockzz, 

When I applied your solution, here is what I get per the screenshot below. Do I need to add something to the VR coding to disable the current stylesheet?

User-added image