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
DannyK89DannyK89 

pageBlockSection color change

I would like to change the color of one of my pageblocksections. Below is just a sample if what I would like to do. I would like to change the color of the first pageblocksection. I would like to know if this is possible or not. 

 

Thanks. 

<apex:page>
<apex:form>
    <apex:pageblock>
        <apex:pageBlockSection>
            <apex:pageBlockSection>
            </apex:pageBlockSection>
            <apex:pageBlockSection>
            </apex:pageBlockSection>
        </apex:pageBlockSection>
    </apex:pageblock>
</apex:form>
<apex:page>

 

cvuyyurucvuyyuru

Use this style in VF page

 

 

<style>
.pbSubheader{
background-color: red !important;
border-color: none !important;
}
</style>

 

Thanks
DannyK89DannyK89

This changes all the pageblocksections red. I would like only the first main pageblocksection to be a different color. 
Shebin-KVP Business SolnsShebin-KVP Business Solns

Hi  Danny,

 

 Please try the folllowing code  ,as we dont have any style attribute for apex:pageblockSections we have to write Javascript  /JQuery to solve the problem here  I  have used  JQuery.Feel free for further clarifications.....

 

 

<apex:page   showheader="true">
  <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
  <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
   
  <apex:form id="myPageblocksForm">
    <apex:pageblock id="myPageblock">
        <apex:pageBlockSection  id="mypageblockSection">
            <apex:pageBlockSection>
            </apex:pageBlockSection  >
            <apex:pageBlockSection>
            </apex:pageBlockSection>
        </apex:pageBlockSection>
    </apex:pageblock>
 </apex:form>
 <script type="text/javascript">
  try
  {   
    var blockid= $('.apexp :first-child').attr("id").replace(/:/g, "\\:");
    blockid = '#'+blockid;
    $(blockid+"\\:mypageblockSection").css("background-color","#707070");
    
  }
  catch(err)
  {
    alert(err);
  }
</script>

 </apex:page>

 
DannyK89DannyK89

I tested this out on my page and it seemed to do some weird stuff to my page. Buttons don't seem to work anymore. Also this turned the background of my page to a diffrent color and not the section. I'm not sure when the issue is. Also I found that If I put a value in the tabstyle attribute the code does not work. 
Shebin-KVP Business SolnsShebin-KVP Business Solns

Hi Dann,

 

 Please post your page source to check where is the problem..
DannyK89DannyK89

Here is the code without any javascript

 

<apex:page tabStyle="Engagement__c" controller="EngageController" showHeader="false" sidebar="false">
<apex:form id="EngagForm">
<apex:pageBlock id="EngagBlock" title="Engagement Information Related to: {!Name}" >
<apex:repeat id="SectionList" value="{!Engag}" var="item">
    <apex:pageBlockSection id="EngagSection" title="Information">
        <apex:repeat value="{!$ObjectType.Engagement__c.FieldSets.Engag_Info2}" var="set">
            <apex:pageBlockSectionItem rendered="{!CONTAINS(LOWER(set.label), LOWER('Engagement Name'))}">
                <apex:outputLabel value="{!set.label}"/>
                <apex:commandLink value="{!item[set]}" action="/{!item.id}"/>
            </apex:pageBlockSectionItem>
            <apex:outputField value="{!item[set]}" rendered="{!NOT(CONTAINS(LOWER(set.label), LOWER('Engagement Name')))}"/>
        </apex:repeat>
        <apex:pageBlockSection title="Rates and Dates">
             
            <apex:repeat value="{!$ObjectType.Engagement__c.FieldSets.Rates_and_Dates_Ver2}" var="set">
                <apex:outputField value="{!item[set]}"/>
            </apex:repeat>
        </apex:pageBlockSection>
    </apex:pageBlockSection>
</apex:repeat>
</apex:pageBlock>
</apex:form>
</apex:page>