How to change default icons (info, Error, Warning) of FacesMessage and af:messages in Oracle ADF

Hello all
this post is about customizing or changing default icons of FacesMessage , it is very basic but sometimes it's hard to do easy things
if we need to use alternate icons in af:messages or in programmatic FacesMessage, so to do this just create a small ,simple CSS file (ADF Skin) in viewController project and use this code

Change url as per your icon image path, you can also define same for Fatal Error and Confirmation icon also

af|messages::info-icon
{
  content: url("../../information.png"); 
}

af|messages::warning-icon
{
  content: url("../../warning.png"); 
}
af|messages::error-icon
{
  content: url("../../error.png"); 
}

apply this skin to project and run your application to see changes

Default Icon	Changed Icon

Happy Learning :)

Hiding search icon of af:inputListOfValues using CSS & ADF Skin

Hello All,
Hope all are doing good, this post talks about skinning inputListOfValues to hide its search icon (magnifying glass)
we can use the auto-suggest feature in inputListOfValues so if we don't want to display that default search icon then what to do?

• inputListOfValues looks like this in ADF Faces

•  I have created a page and dropped 2 inputListOfValues on page

•  there is 2 types of requirement about hiding search icon
1. Hide icon of all inputListOfValues(LOVs) available on page or application
2. Hide icon of some selected fields
• to do this we have to create a CSS (skin) in application

• give relevant name of CSS file and set this file as default skin of application

• Now to hide icon of the selected inputListOfValues component in an application, go to the source of CSS file and just write this code
   



.TagSearchIconHidden af|inputListOfValues::search-icon-style
{
display: none;
} 



• Now go to the page and paste TagSearchIconHidden in StyleClass property of lov component to hide its icon, run your page and see, I have done this in my first LOV

•  Now to hide icons of all lov component just change CSS file with this script



af|inputListOfValues::search-icon-style
{
  background-image: none; 
}



• Now no need to set StyleClass, it is applicable to all lov components of the application

 Cheers :-)