Resize FacesMessage, Change look n feel of Message Box using ADF Skin

We all must have used FacesMessage somewhere in ADF application, FacesMessage is used to show any notification like error, warning or confirmation
Here you can read more about FacesMessage

Previously I have posted about changing default icon of FacesMessage using ADF Skin now this post is about resizing FacesMessage dialog and changing it's look and feel


Default FacesMessage looks like this

As we can see that for a small text message it shows a big dialog box that looks weird so to control sizing of FacesMessage we need to override af:dialog CSS

Use this CSS to resize dialog box according to message text

-tr-default-content-width	The root style, af|dialog, contains skinning property "-tr-default-content-width" that provides the default contentWidth if not provided when stretching is turned on, "stretchChildren=first". The default is 250 pixels.
-tr-default-content-height	The root style, af|dialog, contains skinning property "-tr-default-content-height" that provides the default contentHeight if not provided when stretching is turned on, "stretchChildren=first". The default is 250 pixels.

af|dialog{
  -tr-default-content-width : -1;
  -tr-default-content-height : -1;
}

After applying skin it looks like this

It looks good , Now we can do some more changes in CSS

af|dialog {
    -tr-default-content-width: -1;
    -tr-default-content-height: -1;
    background-color: Highlight;
    border-color: #006262; 
}
af|dialog::title {
    color: #002e4e;
}

Output is

Now if you don't want that OK button on dialog then just add few more lined in CSS

af|dialog::footer-content af|button {
    visibility: hidden;
}

Output is

So these are the selectors to change style of FacesMessage , Try and find some more and let us know :)

Cheers :) Happy Learning