[SalesForce] How to change color on One particular pageBlockSection

I have Change the color using CSS. But i want change the color on one particular pageblocksection. How can i do that. I tried several methods, but does not work. Thanks 

    <apex:pageBlockSection title="Add Batch 3" collapsible="true" columns="1" id="section1">
        <apex:pageBlock >
            //Stuff
        </apex:pageBlcok>
    </apex:pageBlockSection

**CSS**

     html .brandTertiaryBgr {
            background-color:  #1A1A56!important;
            color: #FFFFFF!important;
            font-weight:bold;
            font-size:14px;
            margin-bottom:20px;}

By using above css code I would be able to change colours in all my pageblockSections. I used below method to change color, It does not work either`.

<apex:pageBlockSection title="Add Batch 3" collapsible="true" columns="1" id="redSection">
    <apex:pageBlock >
        //Stuff
    </apex:pageBlcok>
<script>colorPageBlock(document.getElementById("{!$Component.redSection}"), "red");</script>
</apex:pageBlockSection

JavaScript

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

}
</script>

Is there any otherway I can Change my pageBlockSection Color? Only for one. Thanks

Best Answer

Wrapping the apex:pageBlockSection in an element that a CSS class can be added to works:

<apex:page>

<style>
.custom1 {
    background-color: red !important;
}
.custom3 {
    background-color: green !important;
}
</style>

<apex:pageBlock>
    <apex:outputPanel layout="block" styleClass="custom1">
        <apex:pageBlockSection title="Section 1">
            Content 1
        </apex:pageBlockSection>
    </apex:outputPanel>
    <apex:outputPanel layout="block">
        <apex:pageBlockSection title="Section 2">
            Content 2
        </apex:pageBlockSection>
    </apex:outputPanel>
    <apex:outputPanel layout="block" styleClass="custom3">
        <apex:pageBlockSection title="Section 3">
            Content 3
        </apex:pageBlockSection>
    </apex:outputPanel>
</apex:pageBlock>

</apex:page>

producing this output:

Output

PS

To style the headers you can make use of a CSS descendant selector:

<style>
.custom1 .pbSubheader {
    background-color: red !important;
}
.custom3 .pbSubheader {
    background-color: green !important;
}
</style>

where pbSubheader is a class applied by the Visualforce framework to the header.

Related Topic