CODEWITHSUNDEEP
jsf-2
Raj
Raj

Reputation: 51

How to customize rich faces default css?

I am new to Rich Faces. We are having a form with validations. We are using rich:message to display the error messages. If the user doesn't enter data and if he clicks save, then validation messages will be displayed. As I am using rich:message, the error message has an error message followed by the text.

How can I remove the error image and also how can i change the style of font?

Please hlep me on this.

Upvotes: 2

Views: 6045

Answers (1)

DenisGL
DenisGL

Reputation: 1200

There are two ways for changing styles and font:

  1. With skins
  2. With CSS

Skin allows you to customize some styles (like font), but not everything. To create your own skin, add a yourskinname.skin.properties in META-INF/skins directory. Also, add the following lines in web.xml:

<context-param>
    <param-name>org.richfaces.skin</param-name>
    <param-value>yourskinname</param-value>
</context-param>

For the content, copy the content of one file of the META-INF/skins folder of richfaces-core-impl-4.0.0-Final.jar, and change the properties you want. You may provide only a subset of properties, by adding "baseSkin=name of base skin" in your file: the properties not described in your file will be retrieved from the base skin.

For instance, to change the fonts to "Calibri 13px", your file would look like :

baseSkin = DEFAULT
generalSizeFont=13px
generalFamilyFont=Calibri 

# Fonts
headerSizeFont=13px
headerFamilyFont=Calibri 

tabSizeFont=13px
tabFamilyFont=Calibri 

buttonSizeFont=13px
buttonFamilyFont=Calibri

For deeper explantation, look at http://docs.jboss.org/richfaces/latest_4_0_X/Developer_Guide/en-US/html/chap-Developer_Guide-Skinning_and_theming.html

But skins are not sufficient for your case (removing the error image, for instance), so you need to use CSS, as suggested by @Asad. Personaly, I had an issue with this solution : richfaces CSS were always loaded after mine. I found a way of overcoming this issue: I put a <h:outputStylesheet library="css" name="myrichfaces.css"/>, where I put my customized values, inside the <body> tag !, then my CSS is loaded after richfaces, so I can overload values.

CSS tags for messages are described here: http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html/chap-Component_Reference-Output_and_messages.html#sect-Component_Reference-richmessage-Style_classes_and_skin_parameters ; so, for removing the icon for error messages, you can add the following CSS statements:

.rf-msg-err {
    background-image: none;
}

Upvotes: 8

Related Questions