How do I stop richfaces adding borders to panels and calendars?

Question

I'm hoping to use a custom richfaces skin to handle the bulk of my presentation work. Unfortunately richfaces renders borders around every cell in a calendar component and around each panel. I would like to turn them off so that day numbers site in an open grid with no borders. There is no obvious way to do that using skins or attributes of the calendar control.

I could use custom CSS but I'd prefer to work with the framework to completely remove the border related properties from the stylesheets created by richfaces rather than work against the framework and override everything using ugly CSS.

So how do I stop richfaces adding borders to panels and calendars?

---

This guy has a similar problem

Answer 1

As of version 3.3.0.GA it is not possible to ask richfaces to stop rendering CSS for borders and backgrounds. Its necessary to override each of the properties from the built in stylesheets (the ones contained in org.richfaces.renderkit.html.css which is part of richfaces-ui-3.3.0.GA.jar).

Plug and skin gives you the necessary power to do that, as would custom CSS added using the usual techniques, though plug and skin is arguably better as you can reference abstract colour definitions to compensate for missing backgrounds, like this:

<u:style name="color" skin="abstractColorName" />

The following CSS properties are useful for quickly neutralising the border and background related properties.

border: none;
background: transparent;

To get started with plug and skin you can use the following Maven2 command sequence:

mvn archetype:generate -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-plug-n-skin -DarchetypeVersion=3.3.0.GA -DartifactId=fil-skins -Dpackage=com.feelitlive.richfaces -DgroupId=com.feelitlive.server -Dversion=0.0.1-SNAPSHOT -DarchetypeRepository=http://repository.jboss.com/maven2/
cd fil-skins
mvn cdk:add-skin -Dname=fil -Dpackage=com.feelitlive.richfaces.skins

This is best done from the command line as unfortunately the Eclipse plugins cannot locate the archetypes in the jboss repository (other IDEs may handle that better). You'll need to change artifactId, groupId, package, version and name properties to suit your project. Choose an artefact and package name that reflects the scope of the artefact for holding mulitple skin definitions.

---

It would be possible - though a lot of work - to add support for skin properties in the general format xxxBackgroundEnabled and xxxBorderEnabled to switch off rendering of those border and background CSS on a case by case basis.

You would need to work with the richfaces team to patch the xcss files in org.richfaces.renderkit.html.css. You'd also need some kind of conditional output functionality in one of the XCSS JSF tag libraries (identified by http:/jsf.exadel.com/template/util or http:/jsf.exadel.com/template in the XCSS files) which I'd anticipate using to wrap groups of CSS properties in the XCSS files.

If you made such a modification to richfaces then you would be able to disable rendering of the controversial CSS from the properties file of any skin.

Answer 2

There is a skin called plain that's got nearly no styles at all attached to it.

Here's an excerpt from the documentation:

Skin 'plain' was added from 3.0.2 version. It doesn't have any parameters. It's necessary for embedding RichFaces components into existing projecst which have its own styles.

You can activate it by adding

<context-param>
    <param-name>org.richfaces.SKIN</param-name>
    <param-value>plain</param-value>
</context-param>

to the web.xml.

---

You can also hinder RichFaces to load any styles at all with

<context-param>
     <param-name>org.richfaces.LoadStyleStrategy</param-name>
     <param-value>None</param-value>
</context-param>

set in the web.xml.

But beware, since it won't work in JBoss Portlet Bridge 1.0.0.

Answer 3

RichFaces has a skin system built in called Skinnablity. Skinnability is a high-level extension of standard CSS. You can create your own skin file to use in your application(jboss documentation).

In the richfaces-impl jar, the folder /META-INF/skins contains all the skin files (.skin.properties). Copy one and rename name it, modify what you want. You will have to rebuild the jar.

OR

You can use the plug-n-skin feature of richfaces, which i've never tried before but looks like it would also work for what you are trying to do.