Want to make page message text red

Question

I have a page message and I have a requirement that I want the text to be in red color.

I have written some javascript like this:

<Script>
    window.onload=func1;
    function func1()       
    {    
        document.getElementById('{!$Component.msg2}').style.color = "#ff0000";
        alert('{!$Component.msg2}');
    }  
</Script>

and the page message is like

<apex:outputPanel id="errordisplayPanel" >
    <apex:outputPanel Id="errorspanel">
        <input id="isDiscountCheckPrfmd" type="hidden" name="isDiscountCheckPrfmd" value="{!isDiscountCheckPrfmd}" />
        <c:Displayerror id="errordisplay" errorList="{!lstAllError}"  />                         
        <br/>  
    </apex:outputPanel>
    <div id="focusError"></div>                    
    <apex:pageMessages id="msg2" />
</apex:outputPanel> 

I don't know why its not working. But when I use the static id that I pick up using inspect element it's working.

It was like:

 document.getElementById("createSOheaderpage:newheaderform:newheaderpb:msg2:j_id63:j_id64:0:j_id65:j_id66:j_id68").style.color = "#ff0000";

Can someone please help me with this

Thanks in Advance

Answer 1

The <apex:pagemessage> when is rendered as html , the text message in inside a div whose class is "messageText".You can use this class to style your pageMessage. Like:

<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js" /> 
<style>
        .message ul,.messageText{
            color:red;
        }
    </style>

Answer 2

You can overwrite the standard salesforce error message css classes. In my example i have a simple error message with only short summary and a custom icon. So i took all error css classes and changed the icon. Then i have wrapped my message in a outputPanel and edited the message class (but only for this output panel): removed background and border. You can pack that two css classes to the static resource and include on your pages. Don't forget to wrap the custom message into the output pannel:

<style>
.errorM4 .msgIcon, .errorSmall {
    background-image: url(/img/samples/flag_red.gif) !important;
}

.myCustomMessage .message {
    background: none  !important;
    border: none !important;
}

</style>

    <apex:outputPanel styleClass="myCustomMessage">
        <apex:pageMessage severity="error"
                          strength="1"
                          summary="Some error text" />
    </apex:outputPanel>