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
Kent ManningKent Manning 

How do I change the color and position of <apex:messages/>

I am using the <apex:messages/> tag to display messages on a visualforce page that is overriding the New button on a custom object. When the messages present their font color is black, and the message is way to the left of the page.  How do I get the messages to display in red and be centered on the page rather than left justified?

 

 

 Here is my visualforce code. 

<apex:page standardController="Salesforce_Issue__c"  >

 <style type="text/css">
  .exceptionText{font-style:italic; 
                 font-size:16px; 
                 font-weight:bold; 
                 text-align:center;
                 color:red;}
 </style>

   <apex:form>
    <apex:pageBlock mode="edit">
        <apex:pageBlockButtons  >
            <apex:commandButton value="Save" action="{!Save}"/>
            <apex:commandButton value="Cancel" action="{!Cancel}"/>
        </apex:pageBlockButtons>
        
        <apex:messages layout="table" styleClass="exceptionText"/>

 It seems that the css is not working fully. Font-weight,  font-size, font-style all work but text-align and color don't seem to be recognized.

 

 

Any help would be appreciated.

 

Best Answer chosen by Admin (Salesforce Developers) 
sravusravu

Ok. Understood where the problem is occurring.

As you are using layout="table"  in <apex:messages layout="table" styleClass="exceptionText"/> your style class is not working as desired. If you use layout="list" the style class works fine.

In your case as you wish to use layout="table" make the following changes to you style class and see:

 

<apex:page standardController="Salesforce_Issue__c"  >

<style type="text/css">
 table.exceptionText td {

                 font-style:italic;
                 font-size:16px;
                 font-weight:bold;
                 text-align:center;
                 color:red;}
</style>

   <apex:form>
    <apex:pageBlock mode="edit">
        <apex:pageBlockButtons  >
            <apex:commandButton value="Save" action="{!Save}"/>
            <apex:commandButton value="Cancel" action="{!Cancel}"/>
        </apex:pageBlockButtons>
       
       <apex:messages layout="table" styleClass="exceptionText"/>


Let me know if you face any difficulty...........

Hope this helps you.

 

Accept this as a solution if this resolves your issue.

All Answers

sravusravu

Ok. Understood where the problem is occurring.

As you are using layout="table"  in <apex:messages layout="table" styleClass="exceptionText"/> your style class is not working as desired. If you use layout="list" the style class works fine.

In your case as you wish to use layout="table" make the following changes to you style class and see:

 

<apex:page standardController="Salesforce_Issue__c"  >

<style type="text/css">
 table.exceptionText td {

                 font-style:italic;
                 font-size:16px;
                 font-weight:bold;
                 text-align:center;
                 color:red;}
</style>

   <apex:form>
    <apex:pageBlock mode="edit">
        <apex:pageBlockButtons  >
            <apex:commandButton value="Save" action="{!Save}"/>
            <apex:commandButton value="Cancel" action="{!Cancel}"/>
        </apex:pageBlockButtons>
       
       <apex:messages layout="table" styleClass="exceptionText"/>


Let me know if you face any difficulty...........

Hope this helps you.

 

Accept this as a solution if this resolves your issue.

This was selected as the best answer
Kent MKent M

Thanks sravu, it worked like a charm! :smileyhappy: