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

  • As an aside, you rarely need to use JS for static styling. CSS will do the job, as the solution demonstrates. – Rob Aug 14 '15 at 16:39
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.

  • Thanks. I want to change the color in Pageblocksection Header (Section 1) not the background. – Suneth Aug 14 '15 at 16:26
  • 1
    Apply the CSS to the pbHeader child of the .custom1 element. .custom1 .pbHeader { /* Your CSS here */ } – Rob Aug 14 '15 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 '15 at 16:43
  • 1
    @danzi You need a dot before the first class name. See the PS. – Keith C Aug 14 '15 at 16:44
  • @Keith C It works after . before the first class name. Thanks Guys. Appreciate you help. – Suneth Aug 14 '15 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.