PageBlockSections with different colors at each section.

Hi friends,

Few days ago, one of my client come up with this requirement,

He wants to see all sections on the detail page in different color so that he can easily differentiate (or group) fields of the custom object according to color code like red section fields blue section fields,

Generally each section on the detail page has the same color as their tab,

so for this requirement i have created a vf page and put that page in the detail page layout,

I am using FieldSet here so that we can easily add and remove fields from vf page later without touching code of vf page.

Note:-
Before using this code must create FieldSet, for creating FieldSet go to your custom object and select new FieldSet.(for more detail see this link).

Here i am using three FieldSets name as

1. FieldSet1
2. FieldSet2
3. FieldSet3

Here the code of that vf page:-

	<apex:page standardController="Position__c" id="Page">
	<script>
	var Sec_Colors = ["#56DEF0", "#ED55D6", "#ACE3BC"]; // put hash code of color here according to number of section.
	window.onload = function(){
	var Sections = document.getElementsByClassName('pbSubheader brandTertiaryBgr tertiaryPalette');
	for(var i = 0; i < Sections.length; i++){
	Sections[i].style.backgroundColor = Sec_Colors[i];
	}
	};
	</script>
	<apex:pageBlock id="PB">
	<!-- First Section -->
	<apex:pageBlockSection title="Production Website Information (LIVE)">
	<apex:repeat value="{!$ObjectType.Position__c.FieldSets.FieldSet1}" var="f">
	<apex:outputField value="{!Position__c[f]}"/>
	</apex:repeat>
	</apex:pageBlockSection>
	<!-- Second Section -->
	<apex:pageBlockSection title="Staging Website Information">
	<apex:repeat value="{!$ObjectType.Position__c.FieldSets.FieldSet2}" var="f">
	<apex:outputField value="{!Position__c[f]}"/>
	</apex:repeat>
	</apex:pageBlockSection>
	<!-- Third Section -->
	<apex:pageBlockSection title="Development Website Information">
	<apex:repeat value="{!$ObjectType.Position__c.FieldSets.FieldSet3}" var="f">
	<apex:outputField value="{!Position__c[f]}"/>
	</apex:repeat>
	</apex:pageBlockSection>
	</apex:pageBlock>
	</apex:page>

view raw PositionFieldSetEx hosted with ❤ by GitHub

Screen Shots:-

Happy coding..:)
Thanks,
Anurag Jain