+ Start a Discussion
Herish SurendranHerish Surendran 

How to change the colour of page block section ? I have tried it in the below code but it is not working. Can anyone let me know where I went wrong

<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}"/>
<apex:inputField value="{!account.site}"/>
<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}"/>
<apex:inputField value="{!account.site}"/>
<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}"/>
<apex:inputField value="{!account.site}"/>
<script>colorPageBlock(document.getElementById("{!$Component.orangeSection}"), "orange");</script>
</apex:pageBlockSection>
</apex:pageBlock>

</apex:form>

</apex:page>

 
Maharajan CMaharajan C
Hi Herish,

Am seeing some typo issue in you JS:  double quotes is not valid in your code.

Please just copy and paste the below code it will work:

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

 } 
</script>
<apex:pageBlock title="My Content" mode="detail">
<apex:pageBlockSection id="redSection" title="My Content Section" columns="2">
<apex:inputField value="{!account.name}"/>
<apex:inputField value="{!account.site}"/>
<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}"/>
<apex:inputField value="{!account.site}"/>
<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}"/>
<apex:inputField value="{!account.site}"/>
<script>colorPageBlock(document.getElementById("{!$Component.orangeSection}"), "orange");</script>
</apex:pageBlockSection>
</apex:pageBlock>

</apex:form>

</apex:page>

Thanks,
Maharajan.C

 
Deepali KulshresthaDeepali Kulshrestha
Hi Herish,


Greetings to you!

I have gone through your problem. Please try below code:

<apex:page >
    <apex:pageBlock >
        <style>
            body .bPageBlock .pbBody .green .pbSubheader{
                background-color:green;
            }
        </style>
        <apex:outputPanel layout="block" styleClass="green">
            <apex:pageBlockSection title="Page Block Section" id="pbsection">
                
            </apex:pageBlockSection>
        </apex:outputPanel>
    </apex:pageBlock>
</apex:page>
     
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com