How is p:messages customizable?

Oleg · 06 Jan 2010, 00:30

Hello,

Is there a way to change CSS for p:messages? I have looked into the MessagesRenderer.java and found that all style informations are hard coded (clear, pre-defined) and the component tag itself doesn't provide attributes to pass custom CSS. Is it right?

The other issue is that corners are not rounded under IE. By the way, there are many solutions (with and without JavaScript) to make rounded corners under IE.

Thanks a lot!
Oleg.

ydarcin · 06 Jan 2010, 08:41

Hi,

sure you can change the style of the messages. For example fatal error message has the styleClass: pf-messages-fatal, and info has the class: pf-messages-info etc.

So you can override them in your css file, and change the icon, border, colors etc.

Yigit.

Oleg · 06 Jan 2010, 13:27

Hi Yigit,

Do you mean I should include an own CSS file after <p:resources /> and don't care more? I can do it, but I thought that I can pass any CSS classes into the p:messages tag.

Thanks.
Oleg.

ydarcin · 06 Jan 2010, 13:53

Hi,

yes I meaned using an own CSS or just writing <style>pf-messages-info{..}</style>..

Currently there is no property for style classes for each message severity. Because it will be the same to write your own css and put it like infoStyle="myStyle" and overriding the current css i.e. pf-messages-info in your css.

Yigit

06 Jan 2010, 13:59

Hi,

As with most of the PrimeFaces components, we try not to bloat components with *style and *styleClass as CSS is quite powerful to use with selectors.

As documented in user's guide, selectors for messages are;

.pf-messages : Main container
.pf-messages-{severity} : Container element of the messages
.pf-messages-{severity}-summary : Summary text
.pf-messages-{severity}-detail : Detail text
.pf-messages-{severity}-icon : Severity icon

{severity} can be info, warn, error and fatal.

If you add your overriden css after p:resources, styling would work.

As for ie and rounded corners, this is a known minor issue that'll be addressed soon.

Oleg · 06 Jan 2010, 17:11

Hello Cagatay,

We don't really need <p:ressources /> with JSF 2 and I won't to use <p:resources /> in the feature. Assume now I have included my own CSS file. The question is what is the order which CSS files will be included from JSF 2 in? So, I have looked into the JSF 2 implementation and found that needed resource files from custom components will be added at the end of head section (add method of List). Right? In this case we would not have any possibilities to overwrite custom style sheets (apart from inline css block). Therefore, I think we need at least styleClass attribute.

Now to rounded corners and IE. There is a good overview http://www.spiffycorners.com/. I have evaluated some solutions. In my opinion this solution is the best - http://www.editsite.net/blog/rounded_corners.html. We need to aks whether the brower is IE and add after messages DIV (if necessary) something like

Code: Select all

<script type="text/javascript">
Rounded('rounded', 6, 6);
</script>

Here 'rounded' is the Id of the messages DIV. That works great and the Javascript is small. The browser check can be also done within Rounded method.

- Oleg.

Oleg · 06 Jan 2010, 18:21

Okey, I have to add h:outputStylesheet with my own CSS file quite at the end of faceletes page. It should work.

06 Jan 2010, 18:35

Hi Oleg,

I've also realized that problem with h:head, sun's mojarra implementation was rendering resources at before closing the </head> making very hard to override css. So like a month ago I've created this issue which is fixed;

https://javaserverfaces.dev.java.net/is ... gi?id=1443

Now h:head renders resources after starting <head>. Note that this will be available in 2.0.3 release of Mojarra.

Regarding rounded corners in ie, I'll take a deeper look to your suggestions, thanks for taking the time for providing the feedback.

Oleg · 06 Jan 2010, 20:30

Great news, thanks!

Do you know when Mojarra 2.0.3 will be approximately available? Will be PrimeFaces 2.0.0 available afterwards?

I have one idea with rounded corners. You could introduce a new attribute for p:panel - <p:panel roundcorners="rounding degree for each corner" ... and then maybe for p:messages too. The great thing with proposed http://www.editsite.net/blog/rounded_corners.html is that you don't need provide CSS or images for this functionality and the rounding is very smooth and sexy.

- Oleg.

Oleg · 08 Jan 2010, 00:30

I have read the skinnability section of RichFaces documentation. They motivate style and styleClass attributes so: "This method allows you change the look an feel for just the component on the current page without affecting components on other page". But I think with redefining of pre-definied CSS classes we can achive the same result if each component have an Id. I can write e.g. in own CSS file

Code: Select all

#mymessages1.pf-messages {border: solid 1px yellow;}
#mymessages2.pf-messages {border: solid 1px green;}

What do you think?

Oleg.

How is p:messages customizable?

Who is online