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
Nagarjuna Reddy.PNagarjuna Reddy.P 

how to color visual force background

Hi,
      I need to change the default background color of vf page.
  User-added image
in this image there are two pageblock sections with white backfround , i am using lightning interface.
I used attribute in <apex:form StyleClass="background-color:blue" > but the white background of pageblock sections remains same.I need to apply the color to whole form including pageblock sections also,Is there any other way  please suggest me.
Thank you All.
Rahul.MishraRahul.Mishra
Hi,

You can do thi sby Jquery, check the following example: 
<apex:page >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".bPageBlock").css("background-color","lightblue");
    });
    </script>
    <apex:pageBlock >
      Page Block Color has been changed!
    </apex:pageBlock>
</apex:page>

Mark my answer as best if it does solves your problem.

Thanks,
Rahul 
Nagarjuna Reddy.PNagarjuna Reddy.P
Hi Rahul,
                Thank you for your reply,after following your suggested code the page looks as below
User-added image
The page Block and form color chaged,in the same way i need to change for
1.page block sections which is white in the present image and
2.Section header also i need to change whose background is gray and an icon is to be added to section header
Please give me suggestions for my requirement. 


 
Rahul.MishraRahul.Mishra
Hi,

Use the following code to change the color of page block section and header: 
<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>

 
Rahul.MishraRahul.Mishra
Use following to chnage the header color while above one for back ground one:
  
<apex:pageBlockSection id="orangeSection" title="My Content Section" columns="2">
<apex:inputField value="{!account.name}"/>
<script>colorPageBlock(document.getElementById("{!$Component.orangeSection}"), "orange");</script>
</apex:pageBlockSection>

 
Nagarjuna Reddy.PNagarjuna Reddy.P
Hi Rahul,
                    Once again thank you for your quick reply,I used code which you posted it changes only PageBlock Section Header,I need to change whole section bakground,any idea. 
Ajay K DubediAjay K Dubedi
Hi Nagarjuna,

Please try the below CSS.

<style>
    .pbSubheader
        {
        background-color:white !important; // for changing the background-color of header.
        color:black !important; // for changing the color of heading text.
        }
    
    .pbSubsection{
        background-color:red; // For changing the background-color body of pageblocksection.
        }
</style>

Please select as best answer if it helps you.

Thank You,
Ajay Dubedi
Nagarjuna Reddy.PNagarjuna Reddy.P
Thank you Rahul and Ajay for your valuable replies,The code you suggested is working fine in classic view, when it comes to lightning pabeblock section body is not colored.Any way it helmed me great.