0

Changing the background color of a pageBlockSection. I can do this with a local style but not using a CSS file as a static resource (preferred.) I'm sure this is an obvious fix but can't seem to get it working with a static resource file. Any ideas ?

Using a static resource file:

.headerstyle2 body .bPageBlock .pbBody .yellow .pbSubheader{
    background-color:yellow;
}

Using a local style

<style>
  body .bPageBlock .pbBody .yellow .pbSubheader{
  background-color:yellow;
  }
</style>

Using an outputPanel (works) with the style:

  ....
<apex:stylesheet value="{!URLFOR($Resource.pdfcssresource, 'CREresource_CRE.css')}"/> 
....
    <apex:actionRegion >
    <apex:outputPanel styleClass="yellow" layout="block">
     <apex:pageBlockSection columns="1" id="section2a" title="Submission Summary Information (Pending Data Def -Reinstatements) " showHeader="true" rendered="{!NOT(submissionList.size == 0)}" >
     </apex:pageBlockSection>
    </apex:outputPanel>
    </apex:actionRegion>

Using a StaticResource file (not working) as styleclass:

  ....
<apex:stylesheet value="{!URLFOR($Resource.pdfcssresource, 'CREresource_CRE.css')}"/> 
....
<apex:actionRegion >
<apex:outputPanel styleClass="headerstyle2" layout="block">
 <apex:pageBlockSection columns="1" id="section2a" title="Submission Summary Information (Pending Data Def -Reinstatements) " showHeader="true" rendered="{!NOT(submissionList.size == 0)}" 
 </apex:pageBlockSection>
</apex:outputPanel>
</apex:actionRegion>
Improve this question
4
  • Have you tried inspecting the element? Its likely that the css class is overwritten by some other css properties. Although I don't really have an explanation for why it does work when you have local css class
    – d_k
    Commented May 3, 2017 at 2:41
  • Didn't see anything. I'm sure there's a syntax issue in the static resource. Hoping a second set of eyes will help.
    – rickmac
    Commented May 3, 2017 at 2:46
  • Looks like @d_k is correct, there must be some other class overriding your changes. Best you could do is add !important to your css property in static resource and it will not be overridden.
    – Salesforcesmarty
    Commented May 3, 2017 at 3:54
  • @rickmac I'd recommend you to check your console when you load the page, this will help you identify if there is anything wrong with your syntax when loading static resource in most cases it does show an error, if the file wasn't loaded.
    – d_k
    Commented May 3, 2017 at 4:04

1 Answer 1

Reset to default
0

This format in the static resource worked.

.bPageBlock .pbBody .header1 .pbSubheader{
             background-color:lightgreen;
         }
.bPageBlock .pbBody .header1 .pbSubheader h3{
             color:grey;
         }
.bPageBlock .pbBody .header2 .pbSubheader{
             background-color:lightblue;
         }
.bPageBlock .pbBody .header2 .pbSubheader h3{
             color:grey;
         }   

<apex:outputPanel layout="block" styleClass="header1" >
 <apex:pageBlockSection columns="1" id="section2a" title="Submission Summary Information (Pending Data Def -Reinstatements) " showHeader="true" rendered="{!NOT(submissionList.size == 0)}" >
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .