Orbeon Search

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity

Form Runner CSS Styling

Contents

  1. 1 Rationale
  2. 2 Writing your own CSS
    1. 2.1 Where to put your CSS
    2. 2.2 Styling specific controls
  3. 3 Changing the page width
  4. 4 Configuring the presentation of automatic PDF output

Rationale

Form Runner has a built-in theme for forms. This page documents how you can change that default.

Writing your own CSS

Where to put your CSS

You can either:
  1. Store your CSS is a separate CSS file, which you either provide in addition or that overrides the default CSS provided by Orbeon Forms. For more on this, see the oxf.fr.css.uri configuration property. This is the recommended technique if your CSS is intended to be shared by several forms.
  2. Put your CSS inline, in the form. This is the recommended technique if you CSS is quite short, and specific to a given form (not to be share amongst forms). For this, put the rules within your own <style> section of the form:
<xhtml:title>My Form Title</xhtml:title>
<xhtml:style type="text/css">
    #fr-view .fr-grid .fr-grid-content .my-class input.xforms-input-input { width: 8em }    
</xhtml:style>

Styling specific controls

You style specific control in your form, say to set the width of an input field, by adding a CSS class on that control. To do so:
  1. Edit the source code for the form (in Form Builder, from the left sidebar, under Advanced, click on Edit Source).
  2. Locate the XForms control you need to modify (for instance <xforms:input> for an input field).
  3. If not present, add a class attribute (for instance: <xforms:input class="" ...>).
  4. Add the space-separated class or classes in the class attribute (for instance: <xforms:input class="my-class" ...>).
The CSS class you use can either be one you define, or one of the following class provided for convenience in form-runner-base.css:
  • fr-width-2em: sets the field with to 2 em
  • fr-width-3em: sets the field with to 3 em
  • fr-width-5em: sets the field with to 5 em
  • fr-width-7em: sets the field with to 7 em
  • fr-width-10em: sets the field with to 10 em
  • fr-width-15em: sets the field with to 15 em
If you define your own CSS class, then write a CSS rule for that class. Make sure to use a strong selector, so it precedence over CSS provide by Orbeon Forms one. E.g. something like:

#fr-view .fr-grid .fr-grid-content .my-class input.xforms-input-input { ...rule... }

When doing CSS work, make sure to use a tool like Firebug that shows what CSS rules apply to an element. This will be your best friend for CSS development (in general, not only for Orbeon Forms!).

Changing the page width

Form Runner uses the YUI Grids, and by default uses their #doc4, which has a fixed width of 974px.

You can change this to another width supported by YUI Grids by editing the form and adding a width attribute on the <fr:view> element. You can set this attribute to either 750px, 950px, 974px, 1154px, or 100%.

However, the Form Runner CSS only supports the #doc4 (974px) width. If you'd like to support another one of the width listed earlier, you'll need to write your own CSS, inline of what has been done for #doc4 in form-runner-base.css.

NOTE: Supporting fixed width other than 974px should be relatively easy to do, however supporting 100% in a way that works on all browsers, including IE 6, is much harder to do.

Configuring the presentation of automatic PDF output

NOTE: This doesn't apply if you associate a PDF template with a form. This only applies to the automatic PDF output feature of Form Runner.

The automatic PDF output feature of Form Runner uses the Flying Saucer library, which is based on HTML and CSS. This means that you can configure the PDF appearance by adding your own CSS to Form Runner, very much in the same way you configure the appearance of Form Runner in your web browser.

First, add your own CSS file to the list of Form Runner CSS files, with the oxf.fr.css.uri property.

In your CSS file, write CSS specific to the print format, under a section like this:

@media print {
    .. your CSS here...
}

This way you can write CSS that only impact the appearance of the PDF, not that of the HTML.