3

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

1
  • As an aside, you rarely need to use JS for static styling. CSS will do the job, as the solution demonstrates.
    – Rob
    Aug 14, 2015 at 16:39

1 Answer 1

7

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.

6
  • Thanks. I want to change the color in Pageblocksection Header (Section 1) not the background.
    – Suneth
    Aug 14, 2015 at 16:26
  • 1
    Apply the CSS to the pbHeader child of the .custom1 element. .custom1 .pbHeader { /* Your CSS here */ }
    – Rob
    Aug 14, 2015 at 16:37
  • @Rob I tired using custom1 .brandTertiaryBgr {background-color: #1A1A56!important; } and custom1 .PbHeader{background-color: #1A1A56!important; }. But does not work.
    – Suneth
    Aug 14, 2015 at 16:43
  • 1
    @danzi You need a dot before the first class name. See the PS.
    – Keith C
    Aug 14, 2015 at 16:44
  • @Keith C It works after . before the first class name. Thanks Guys. Appreciate you help.
    – Suneth
    Aug 14, 2015 at 16:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .