pageblocksection colour

Hi,

I am using this very basic code for a VF page. All i want to do is change the colour of the pageblocksection colapsable bars. Can you help?

i have read all sorts of strange ways of doing it, but hoped there was something more straght forward.

<apex:pageBlockSection  title="{!Group_Relationship__c.Group_Name_AP__c} Action Plan" columns="4">  
                      
            <div style="float:left; width: 100%;" >
            <apex:pageBlockSection title="Details" columns="4">
                <apex:inputField value="{!Group_Relationship__c.Group_Name__c}" required="false"/>
                
                
                
                </apex:pageBlockSection> 
                     
            </div>

August 1, 2018
·
Like
0
·
Follow
1

Best Answer chosen by Matthew Allen

Dinesh Gopalakrishnan
Hi Matthew,

I've Updated Your Code without the Inputfield Components.Kindly check the below Skeleton and add Your Remaining Elements.

<apex:page showHeader="true">
<style>
.custom1 .pbSubheader {
background-color: green !important;
}
.custom2 .pbSubheader {
background-color: red!important;
}
.custom3 .pbSubheader {
background-color: blue!important;
}
.custom4 .pbSubheader {
background-color: black!important;
}
</style>
<apex:pageBlock title="Action Plan">
<apex:tabPanel switchType="client">
<apex:tab label="Details" LabelWidth="200">
<apex:form >
<apex:outputpanel layout="block" styleClass="custom1">
<apex:pageBlockSection title="Page Block Section1 Action Plan" columns="4">
<div style="float:left; width: 100%;" >
<apex:pageBlockSection title="Details" columns="4">

</apex:pageBlockSection>
</div>
</apex:pageBlockSection>
</apex:outputpanel>
<apex:outputpanel layout="block" styleClass="custom2">
<apex:pageBlockSection title="Manheim" columns="4">
<div style="float:left; width: 100%;" >
<apex:pageBlockSection title="Internal" columns="4">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.1%; margin-right: 5px;" >
<apex:pageBlockSection title="External" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.1%; margin-right: 5px;" >
<apex:pageBlockSection title="Details" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.2%">
<apex:pageBlockSection title="Finance" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 49.5%; margin-right: 5px;">
<apex:pageBlockSection title="Market Share" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 50%">
<apex:pageBlockSection title="Comments" columns="2">

</apex:pageBlockSection>
</div>
</apex:pageBlockSection>
</apex:outputpanel>
<apex:outputpanel layout="block" styleClass="custom3">
<apex:pageBlockSection title="Modix" columns="4">
<div style="float:left; width: 100%;" >
<apex:pageBlockSection title="Internal" columns="4">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.1%; margin-right: 5px;" >
<apex:pageBlockSection title="External" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.1%; margin-right: 5px;" >
<apex:pageBlockSection title="Details" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.2%">
<apex:pageBlockSection title="Finance" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 49.5%; margin-right: 5px;">
<apex:pageBlockSection title="Market Share" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 50%">
<apex:pageBlockSection title="Comments" columns="2">

</apex:pageBlockSection>
</div>
</apex:pageBlockSection>
</apex:outputpanel>
<apex:outputpanel layout="block" styleClass="custom4">
<apex:pageBlockSection title="Incadea" columns="4">
<div style="float:left; width: 100%;" >
<apex:pageBlockSection title="Internal" columns="4">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.1%; margin-right: 5px;" >
<apex:pageBlockSection title="External" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.1%; margin-right: 5px;" >
<apex:pageBlockSection title="Details" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 33.2%">
<apex:pageBlockSection title="Finance" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 49.5%; margin-right: 5px;">
<apex:pageBlockSection title="Market Share" columns="2">

</apex:pageBlockSection>
</div>
<div style="float:left; width: 50%">
<apex:pageBlockSection title="Comments" columns="2">

</apex:pageBlockSection>
</div>
</apex:pageBlockSection>
</apex:outputpanel>
</apex:form>
</apex:tab>
<apex:tab label="Objectives and Meetings" LabelWidth="200">

</apex:tab>
<apex:tab label="Key Opportunities" LabelWidth="200">

</apex:tab>
<apex:tab label="Key Threats" LabelWidth="200">

</apex:tab>
</apex:tabPanel>
</apex:pageBlock>
</apex:page>

Thanks,
DineshKumar Gopalakrishnan

August 1, 2018
·
Like
2
·
Dislike
0

Dinesh Gopalakrishnan
Hi Matthew,

Kindly Check the below Steps it'll help you to Fix that.Let me Know if you face any Issues Regarding this.

1. Right Click on the PageBlockSection Collapsible Bar On UI and Inspect the Particular Element.
2. You can See a Div Element with Some Classes.
3.With the Class name add a Background Css and mention Important Flag.

For Example:
<apex:page >
<apex:form >
<style>
.pbSubheader{
background-color:#000!important;
}
</style>
<apex:pageBlock title="Account">
<apex:pageBlockSection title="PageBlockSection">
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Kindly Mark this as a Best Answer if you Find this Useful!

Thanks
DineshKumar Gopalakrishnan

August 1, 2018
·
Like
1
·
Dislike
0

Matthew Allen
thanks for tyring to help me.

I have been able to work out how to change all the sections colours, but I can't seem to change them to each be a different colour?

Below is all of my code, I want to change the colours for -

<apex:pageBlockSection title="{!Group_Relationship__c.Group_Name_AP__c} Action Plan" columns="4"> *to be Red

<apex:pageBlockSection title="Manheim" columns="4"> *to be Blue

<apex:pageBlockSection title="Modix" columns="4"> *to be Orange

<apex:pageBlockSection title="Incadea" columns="4"> *to be Green

<apex:page standardController="Group_Relationship__c" showHeader="true"> <apex:pageBlock title="Action Plan"> <apex:tabPanel switchType="client"> <apex:tab label="Details" LabelWidth="200"> <apex:form > <apex:pageBlockSection title="{!Group_Relationship__c.Group_Name_AP__c} Action Plan" columns="4"> <div style="float:left; width: 100%;" > <apex:pageBlockSection title="Details" columns="4"> <apex:inputField value="{!Group_Relationship__c.Group_Name__c}" required="false"/> </apex:pageBlockSection> </div> </apex:pageBlockSection> <apex:pageBlockSection title="Manheim" columns="4"> <div style="float:left; width: 100%;" > <apex:pageBlockSection title="Internal" columns="4"> <apex:inputField value="{!Group_Relationship__c.Relationship_Owner__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Executive_Sponsor__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.1%; margin-right: 5px;" > <apex:pageBlockSection title="External" columns="2"> <apex:inputField value="{!Group_Relationship__c.Decision_Maker_1__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Decision_Maker_2__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.1%; margin-right: 5px;" > <apex:pageBlockSection title="Details" columns="2"> <apex:inputField value="{!Group_Relationship__c.Current_RAG_Status__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Next_Meeting_Date__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.2%"> <apex:pageBlockSection title="Finance" columns="2"> <apex:inputField value="{!Group_Relationship__c.Volume_Budget__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Volume_Forecast__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 49.5%; margin-right: 5px;"> <apex:pageBlockSection title="Market Share" columns="2"> <apex:inputField value="{!Group_Relationship__c.Fleet_Size__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Manheim__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.BCA__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Aston_Barclay__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 50%"> <apex:pageBlockSection title="Comments" columns="2"> <apex:inputtextArea value="{!Group_Relationship__c.Comments__c}" cols="120" rows="3"/> </apex:pageBlockSection> </div> </apex:pageBlockSection> <apex:pageBlockSection title="Modix" columns="4"> <div style="float:left; width: 100%;" > <apex:pageBlockSection title="Internal" columns="4"> <apex:inputField value="{!Group_Relationship__c.Relationship_Owner__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Executive_Sponsor__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.1%; margin-right: 5px;" > <apex:pageBlockSection title="External" columns="2"> <apex:inputField value="{!Group_Relationship__c.Decision_Maker_1__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Decision_Maker_2__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.1%; margin-right: 5px;" > <apex:pageBlockSection title="Details" columns="2"> <apex:inputField value="{!Group_Relationship__c.Current_RAG_Status__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Next_Meeting_Date__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.2%"> <apex:pageBlockSection title="Finance" columns="2"> <apex:inputField value="{!Group_Relationship__c.Volume_Budget__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Volume_Forecast__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 49.5%; margin-right: 5px;"> <apex:pageBlockSection title="Market Share" columns="2"> <apex:inputField value="{!Group_Relationship__c.Fleet_Size__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Manheim__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.BCA__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Aston_Barclay__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 50%"> <apex:pageBlockSection title="Comments" columns="2"> <apex:inputtextArea value="{!Group_Relationship__c.Comments__c}" cols="120" rows="3"/> </apex:pageBlockSection> </div> </apex:pageBlockSection> <apex:pageBlockSection title="Incadea" columns="4"> <div style="float:left; width: 100%;" > <apex:pageBlockSection title="Internal" columns="4"> <apex:inputField value="{!Group_Relationship__c.Relationship_Owner__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Executive_Sponsor__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.1%; margin-right: 5px;" > <apex:pageBlockSection title="External" columns="2"> <apex:inputField value="{!Group_Relationship__c.Decision_Maker_1__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Decision_Maker_2__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.1%; margin-right: 5px;" > <apex:pageBlockSection title="Details" columns="2"> <apex:inputField value="{!Group_Relationship__c.Current_RAG_Status__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Next_Meeting_Date__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 33.2%"> <apex:pageBlockSection title="Finance" columns="2"> <apex:inputField value="{!Group_Relationship__c.Volume_Budget__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Volume_Forecast__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 49.5%; margin-right: 5px;"> <apex:pageBlockSection title="Market Share" columns="2"> <apex:inputField value="{!Group_Relationship__c.Fleet_Size__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Manheim__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.BCA__c}" required="false"/> <apex:inputField value="{!Group_Relationship__c.Aston_Barclay__c}" required="false"/> </apex:pageBlockSection> </div> <div style="float:left; width: 50%"> <apex:pageBlockSection title="Comments" columns="2"> <apex:inputtextArea value="{!Group_Relationship__c.Comments__c}" cols="120" rows="3"/> </apex:pageBlockSection> </div> </apex:pageBlockSection> </apex:form> </apex:tab> <apex:tab label="Objectives and Meetings" LabelWidth="200"> <apex:relatedList list="Objectives__r"/> </apex:tab> <apex:tab label="Key Opportunities" LabelWidth="200"> <apex:relatedList list="KeyOpportunities__r"/> </apex:tab> <apex:tab label="Key Threats" LabelWidth="200"> <apex:relatedList list="KeyThreats__r"/> </apex:tab> </apex:tabPanel> </apex:pageBlock> </apex:page>

August 1, 2018
·
Like
1
·
Dislike
0

Dinesh Gopalakrishnan
Hi Matthew,

Wrap your PageBlockSections in to a Apex:OutputPanel Component and add a Style Class for it.It'll work.
Kindly Try the Below Markup

<apex:page >

<style>
.custom1 .pbSubheader{
background-color: red !important;
}
.custom2 .pbSubheader{
background-color: blue !important;
}
.custom3 .pbSubheader {
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" styleClass="custom2">
<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>

Thanks
DineshKumar Gopalakrishnan

August 1, 2018
·
Like
1
·
Dislike
0

Matthew Allen
have seen this answer prviously and just can't get it to work. Any chance you can amend my code to fit? Please... :)

August 1, 2018
·
Like
0
·
Dislike
0

Dinesh Gopalakrishnan
Yeah...I'll Update it

August 1, 2018
·
Like
1
·
Dislike
0

This was selected as the best answer

Matthew Allen
Wow, thank you so much for this. Your time and effort to help me out is amazing. Thanks again.

August 2, 2018
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

pageblocksection colour

All Answers

You need to sign in to do that.