+ Start a Discussion
Cindy NormanCindy Norman 

Setting font color on pageBlock?

I have something like this for a nice Title to my pageblock:

<apex:pageBlock id="appPageBlock" title="Application for : {!application.FirstName__c} {!application.MiddleName__c} {!application.LastName__c}">  

with some buttons like this one:
 <apex:pageBlockButtons>
            <apex:commandButton value="Save and Continue" style="...">
</apex:pageBlockButtons>
 
The only way i can change the font color on the Title is to use a facet for "header". However, when i do this, i lose my buttons....they just disappear.

Anyone have a trick as to how to change the font color without losing my buttons?
(I ONLY want to change the font color for my Title...nothing else on the page)

Thank you!

Best Answer chosen by Cindy Norman
KRayKRay
Hey Cindy, Here's a simple work around. 

Instead of using pageBlock's title, create a facet under pageBlock and name it "header". It'll be auto-assigned as the pageBlock's title when rendered.
 
<apex:pageBlock id="appPageBlock"  >
    <apex:facet name="header">{!accountName}</apex:facet>
</apex:pageBlock>


Now use css to style it as needed. The title's rendered class name is "pbHeader". So use it like this
.pbHeader{
color:red;
width:10%;
font-size:250%;
}

This should help get you going 
 

All Answers

Cindy NormanCindy Norman
I got the color to change by using outputPanel with a color setting.
Now i'm trying to change the width of just my title. Any ideas?
 
sandeep@Salesforcesandeep@Salesforce
Hi Cindy,

I think this can help you out.

https://developer.salesforce.com/forums?id=906F000000098qMIAQ

Thanks
Sandeep Singhal
http://www.codespokes.com/
Cindy NormanCindy Norman
OMG...that's over my newbie head but I'll play with it! Thank you!

Just to be clear, i can use some chunk of this to change the pageBlock but not the other subsections within pageBlock? 
Can i mimic this to change the width of only the pageBlock title?
KRayKRay
Hey Cindy, Here's a simple work around. 

Instead of using pageBlock's title, create a facet under pageBlock and name it "header". It'll be auto-assigned as the pageBlock's title when rendered.
 
<apex:pageBlock id="appPageBlock"  >
    <apex:facet name="header">{!accountName}</apex:facet>
</apex:pageBlock>


Now use css to style it as needed. The title's rendered class name is "pbHeader". So use it like this
.pbHeader{
color:red;
width:10%;
font-size:250%;
}

This should help get you going 
 
This was selected as the best answer
Cindy NormanCindy Norman
Hi KRay! Thank you! Problem with using facet is that i lose my buttons that appear in the header bar...they look perfect/great but for some reason, facet makes them disappear (the pageBlockButtons from the example above.)
Kind of weird?
Cindy NormanCindy Norman
Ok...turns out the solution was to skip the facets but use the .pbHeader css style with width:100%;
Thank you guys!!!