Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I've PageBlockSection tags inside PageBlock tag, and I want to give all PageBlockSection tags inside PageBlock tag with specific id a custom style. Any Idea ?

<apex:pageBlock id="BlockWithRedColor" >
          <apex:pageBlockSection title="Block Section One" id="Section1">
              <apex:outputLabel >Hey</apex:outputLabel>
          </apex:pageblocksection>
          <apex:PageBlockSection title="Block Section Two" id="Section2">

          </apex:PageBlockSection>

</apex:pageBlock>

<apex:pageBlock id="BlockWithBlueColor" >
          <apex:pageBlockSection title="Block Section One" id="Section11">
              <apex:outputLabel >Hey</apex:outputLabel>
          </apex:pageblocksection>
          <apex:PageBlockSection title="Block Section Two" id="Section22">

          </apex:PageBlockSection>

</apex:pageBlock>
share|improve this question
add comment

2 Answers 2

up vote 3 down vote accepted

The one solution here is to wrap pageBlockSections with an outputPanels that got some css class assigned:

<style type="text/css">
.myClass1 label { 
    color: red; 
}

.myClass2 label{ 
    color: green; 
}
</style>

<apex:pageBlock id="BlockWithRedColor" tabStyle="Account">

    <apex:outputPanel styleClass="myClass1">
        <apex:pageBlockSection title="Block Section One">
            <apex:outputLabel value="Text 1" />
        </apex:pageblocksection>
    </apex:outputPanel>

    <apex:outputPanel styleClass="myClass1">
        <apex:PageBlockSection title="Block Section Two">
            <apex:outputLabel value="Text 2" />
        </apex:PageBlockSection>
    </apex:outputPanel>

    <apex:outputPanel styleClass="myClass2">
        <apex:PageBlockSection title="Block Section Three">
            <apex:outputLabel value="Text 3" />
        </apex:PageBlockSection>
    </apex:outputPanel>

</apex:pageBlock>

The result:

enter image description here

share|improve this answer
    
It's work fine, thank you. but I thought I'll find something like normal style with html like. div input{ color:red; } –  user3003810 Dec 24 '13 at 9:54
    
@user3003810 It is possible as well. I just wanted to show pure visualforce possibility :) –  mast0r Dec 24 '13 at 9:57
add comment

This might not be the most efficient way you can try out like below

for your code above the actual ids generated looks like

*

j_id0_BlockWithRedColor_Section1 & j_id0_BlockWithRedColor_Section2

*

the format is j_ido_pageblockid_pageblocksectionid

you can try applying styles to with these id as you do normally in CSS

share|improve this answer
    
I've above code inside a form , I tried your code but nothing happened ! maybe the error with my code not yours. Thank you –  user3003810 Dec 24 '13 at 10:01
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.