Customising Form Appearance

[Howard Rybko]

Hello

I am trying to duplicate the look of a simple survey form.

I would like to change the look of the standard form when being completed by users:

• resize the form 
• change background color

To look similar to the example below.

Is this possible?

Thank you

Howard

[Alessandro Vernet]

Hi Howard,

All the changes to the appearance of the form are done with CSS. At this point, there are no "alternate looks" that you can pick from, or UI in Form Builder to customize the look & feel of the forms. The HTML produced by Orbeon Forms has "evolved" to be pretty skinnable through CSS, but of course, that still requires some work and knowledge of CSS. (Tip: use the Chrome Dev Tools, or similar in another browser.)

-Alex

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to orbeon+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/orbeon/56172ea1-d0f3-4c18-bf39-bfa7716dde9an%40googlegroups.com.

[Howard Rybko]

Thanks Alex

We will do as you say with the CSS. 

Question: Is there a separate CSS file for each form so we can affect one form definition at a time?

Thanks again for your help.

Howard

Dr Howard Rybko CEO syncrony.com M  +27827778881 P  +27117836888 E  how...@syncrony.com

You received this message because you are subscribed to a topic in the Google Groups "Orbeon Forms" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/orbeon/Lc_RZ7MzRxs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to orbeon+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/orbeon/CANrzKkkGji2bk7eehPm_MzQXnbtDDQUkM8cS402M7UzxBETCYw%40mail.gmail.com.

[Alessandro Vernet]

Hi Howard,

You point to the CSS file(s) with the `oxf.fr.css.custom.uri.*.*` property. So you can have:

- CSS that applies to all the forms (using `*.*`),

- or all the forms in a specific app (using `APP.*`), 

- or to a specific form (using `APP.FORM`).

This is also how most Form Runner properties work, and you can see that from the name being typically referred to as ending with `*.*`.

https://doc.orbeon.com/form-runner/styling/css

-Alex

To view this discussion on the web visit https://groups.google.com/d/msgid/orbeon/CAE3aDYf7t5A%2BapG1DXnQACzrVef9kYdZ03XKW5scENe6fKGT%3DQ%40mail.gmail.com.

[Howard Rybko]

Thanks Alex.

That's awesome., I just didn't realize. 

Howard 

To view this discussion on the web visit https://groups.google.com/d/msgid/orbeon/CANrzKkmC2LroizP0J7eQTvf4Zn4jA0cE4otLU9vj9VPPzoQ9Lg%40mail.gmail.com.