Customizing the look and feel of Orbeon forms

Question

We would like to be able to customize the areas outside the form elements area itself, such that customers can have all their forms including the areas surrounding the form in their own style. For instance in the area on the top we would like to have a different color and we would like to replace the Orbeon logo by the logo of the customer. Also we would like to hide/remove/customize some buttons that appear below the form. For instance we don't need the buttons for PDF, Email and Close and we want to change the text in the Save button to Submit.

Is that possible? If so, how do we do that? Is there some instruction somewhere for this?

Answer 1

Yes, you can do all of this through properties:

1. You can change the color at the top by overriding the .fr-top rule defined in form-runner-orbeon.css. For more on how to override CSS, see: Default CSS.
2. You can replace or remove the default logo with the oxf.fr.default-logo.uri.*.* property. See Default logo.
3. You can choose which buttons are shown on the Form Runner "details" page by overriding the oxf.fr.detail.buttons.*.* property. See Buttons on the detail page.
4. You can change the label on a button by overriding resources. See Overriding resources.

Answer 2

I was faced with the problem to change the icon in the browser address and found the answer of Alessandro Vernet: http://discuss.orbeon.com/page-address-bar-browser-icon-td4660752.html .
But this solution has the drawback that I had to change the orbeon-form-runner.jar, and this with every new orbeon forms release, what I wanted to avoid.
So the idea was to give my icons the same name as the orbeon icons and to load them in a corresponding directory of the resource directory. So I named my icon orbeon-icon-16.ico and orbeon-icon-16.png and loaded the two files in orbeon/WEB-INF/resources/ops/images.
For Firefox this was OK, but IE continued to show the orbeon icon. Then I noticed that in orbeon-core.jar there where also the 32 pixel icon. So I added the two files orbeon-icon-32.ico and orbeon-icon-32.png and than also IE was showing our icon.