The default look of Icefaces and how to customize it

Question

I have a question about styling Icefaces. I have a minimal application that can use Icefaces components, but when I use them and view the page, the components are not styled (for example the buttons have the default look and tabs have no look at all, no images, nothing). I was wondering why that is and what I should do so I would get the default Icefaces look to work.

Next thing I don't get is how do I customize the look by changing some default css style classes that get applied to the components automatically, so every component I use gets the changed style.

Thank you for your answers!

Answer 1

I suggest that you take one of the existing style-sheets, which are included within the ICEfaces package (check the resources folder of the downloaded ICEfaces-1.8.1-bin.zip):

• rime
• royale
• xp

You can preview them in the ICEfaces showcase

Include it within your *.xhtml file via the <ice:outputStyle> tag:

(portlet)
<ice:outputStyle href="/xmlhttp/css/rime/rime-portlet.css"/>

(servlet)
<ice:outputStyle href="./css/demo_template.css"/>

Starting from here, feel free to either manipulate the chosen stylesheets or - which I favor - include your own stylesheets after ICEfaces' ones and overwrite the needed styles.

Regarding your second question: Basically every ICEfaces component has its own style class. Just browse around the showcase and inspect the components with Firebug. I've not found many classes, which have been reused between different components. Therefore, you'll have to customize each and every component on your own - or apply your own common style class to every component you use via the styleClass property.

<ice:panelGrid styleClass="myCommonStyleClass">
<ice:inputField styleClass="myCommonStyleClass">