Search code examples
orbeon

Customizing the look and feel of Orbeon forms

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?

Solution

  • 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.