[SalesForce] Customize standard error message on the visualforce page

I want to customize the error message box which comes for various errors. i want only a single custom message for all types of errors and also a different custom icon. How can i implement this?

Best Answer

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>

Standard error message layout:

enter image description here