function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

PageBlockSection Title Bar Color

Hello,

 

Does anyone know how to change the color of a PageBlockSection title bar and the title text, or if it is even possible?  I know I can use other options, but I need the collapsible sections.  Thanks.

Best Answer chosen by Admin (Salesforce Developers) 
SeAlVaSeAlVa

Try this example and customize it ;)

<apex:page >
    <apex:pageBlock >
        <style>
            body .bPageBlock .pbBody .red .pbSubheader{
                background-color:#c00000;
            }
            body .bPageBlock .pbBody .grey .pbSubheader{
                background-color:#c0c0c0;
            }
            body .bPageBlock .pbBody .grey .pbSubheader h3{
                color:#000;
            }
        </style>
        <apex:outputPanel styleClass="red" layout="block">
            <apex:pageBlockSection title="hello" id="section1">

            </apex:pageBlockSection>
        </apex:outputPanel>
        <apex:outputPanel styleClass="grey" layout="block">
            <apex:pageBlockSection title="world" id="section2">

            </apex:pageBlockSection>
        </apex:outputPanel>
    </apex:pageBlock>
</apex:page>

 

All Answers

SeAlVaSeAlVa

Try this example and customize it ;)

<apex:page >
    <apex:pageBlock >
        <style>
            body .bPageBlock .pbBody .red .pbSubheader{
                background-color:#c00000;
            }
            body .bPageBlock .pbBody .grey .pbSubheader{
                background-color:#c0c0c0;
            }
            body .bPageBlock .pbBody .grey .pbSubheader h3{
                color:#000;
            }
        </style>
        <apex:outputPanel styleClass="red" layout="block">
            <apex:pageBlockSection title="hello" id="section1">

            </apex:pageBlockSection>
        </apex:outputPanel>
        <apex:outputPanel styleClass="grey" layout="block">
            <apex:pageBlockSection title="world" id="section2">

            </apex:pageBlockSection>
        </apex:outputPanel>
    </apex:pageBlock>
</apex:page>

 

This was selected as the best answer
JN22JN22

Thanks, that definitely did the trick!  Is it possible to change the color of the title text in the pageblockSection as well or do I have to work around it being white all the time?  Thanks for you help!!
JN22JN22

Excellent!
pigginsbpigginsb
The tabStyle attribute on <apex:page> can also be used to change the appearance of the title bar. Just choose the object whose style you want to use.

<apex:page tabStyle="Account">
Taukappa01Taukappa01
This worked for me as well.  However, it broke the collapsible="true" on the apex:pageBlockSection.
Priya ChimalgiPriya Chimalgi
Thank you for this! This worked for me