Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KRISHNAMURTHY ANANTHARAMAKRISHNANKRISHNAMURTHY ANANTHARAMAKRISHNAN 

How to change the font color, size and weight of a pageBlock title?

How to change the font color, size and weight (bold) of a page block title?
Below is my code: 
<apex:page controller="i2" tabStyle="Invoice__c">
    
    <style>
        body .bPageBlock .pbBody .grey .pbSubheader{
        background-color:#585858;
        font-family:courier;
        color:white;
        font-size:100}
        }
       
}
        
        
    </style>
    
    <apex:form>
        
        
        <apex:pageBlock title="Invoice">
            
        
            
            
            
            <apex:pageMessages id="showmsg"></apex:pageMessages>
            <apex:pageblockButtons location="Bottom" >
                <apex:commandButton action="{!save}" value="save" >
                </apex:commandButton>
            </apex:pageblockButtons>
            
            
            
            <apex:outputPanel styleClass="grey" layout="block">
                <apex:pageBlockSection columns="1" title="Invoice Details" id="section1"  >
                    <apex:inputField value="{!acc.Name}"/>
                    <apex:inputField value="{!acc.Total_Amount__c}"/>
                    <apex:inputField value="{!acc.Password__c}"/>
                </apex:pageBlockSection> 
            </apex:outputPanel>
            
            
            <apex:outputPanel styleClass="grey" layout="block">
                <apex:pageBlockSection columns="1" title="Invoice Line Items Details" >
                    <apex:inputField value="{!abb.Name}"/>
                    <apex:inputField value="{!abb.Price__c}"/>
                    <apex:inputField value="{!abb.Invoice__c}"/>
                </apex:pageBlockSection> 
            </apex:outputPanel>
            
           
        </apex:pageBlock>
       
    </apex:form>
    
</apex:page>

 
ChinnoyChinnoy
Hi

please try below code:
.pbHeader
{ color:red; width:10%; font-size:250%; }

Thanks

please mark as correct answer if you get the resolution.
Dushyant SonwarDushyant Sonwar
Just some adjustment in Chinnoy's Css , if pbHeader is not working 
.mainTitle{ 
           color:red !important; 
           width:10% !important; 
           font-size:250% !important; 
       }

You need to put it in between style tag. 
<apex:page controller="i2" tabStyle="Invoice__c">
    
    <style>
         .mainTitle{ 
           color:red !important; 
           width:10% !important; 
           font-size:250% !important; 
       }
       
        
        
    </style>
    
    <apex:form>
        
        
        <apex:pageBlock title="Invoice">
            
        
            
            
            
            <apex:pageMessages id="showmsg"></apex:pageMessages>
            <apex:pageblockButtons location="Bottom" >
                <apex:commandButton action="{!save}" value="save" >
                </apex:commandButton>
            </apex:pageblockButtons>
            
            
            
            <apex:outputPanel styleClass="grey" layout="block">
                <apex:pageBlockSection columns="1" title="Invoice Details" id="section1"  >
                    <apex:inputField value="{!acc.Name}"/>
                    <apex:inputField value="{!acc.Total_Amount__c}"/>
                    <apex:inputField value="{!acc.Password__c}"/>
                </apex:pageBlockSection> 
            </apex:outputPanel>
            
            
            <apex:outputPanel styleClass="grey" layout="block">
                <apex:pageBlockSection columns="1" title="Invoice Line Items Details" >
                    <apex:inputField value="{!abb.Name}"/>
                    <apex:inputField value="{!abb.Price__c}"/>
                    <apex:inputField value="{!abb.Invoice__c}"/>
                </apex:pageBlockSection> 
            </apex:outputPanel>
            
           
        </apex:pageBlock>
       
    </apex:form>
    
</apex:page>