Posted by haritha on Mar 18, 2011; 12:41pm
URL: https://discuss.orbeon.com/How-modify-the-Look-and-Feel-of-the-forms-to-fit-into-the-webpage-design-tp3387096.html

 Hi,

We are in the process of creating forms using the Orbeon FormBuilder and including them onto our webpages, and looking into the aspect of modifying the Look and Feel of the forms to fit into the webpage design. Have gone through the instructions specified in http://wiki.orbeon.com/forms/doc/developer-guide/configuration-properties/configuration-properties-form-runner && http://wiki.orbeon.com/forms/doc/developer-guide/configuration-properties/configuration-properties-form-builder, and tried my hands on the UI changes. A few questions though:

1. Are there any step-by-step guidelines or process provided to go about changing the UI of the form (CSS and html layout)

2. Have changed the css file for FormRunner by setting the property
<property as="xs:string"  name="oxf.fr.css.uri.BuildingCertificate.*" value="/apps/fr/styles.layout.css"/> 
in properties-local.xml, is there a way to change the div structure(layout) of the form.

3. The css applied through the property (specified in the last point) applies only when the form is running through the FOrmRunner. How can the UI changes be applied while the form is being created/edited in the FormBuilder? Have changed the property
<property as="xs:boolean" name="oxf.fb.menu.css"  value="true"/> and uploaded the CSS file but its not reflecting
The problem currently is that the form looks different in FormBuilder and different in FormRunner due to the css change.

Any info on the topic will be greatly appreciated.



Thanks,
Haritha