How modify the Look and Feel of the forms to fit into the webpage design.

 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

Hi haritha,
Go to style forlder and modify css.
Regards,
Smaran

-----Original Message-----
From: haritha [mailto:[hidden email]]
Sent: Friday, March 18, 2011 6:12 PM
To: [hidden email]
Subject: [ops-users] How modify the Look and Feel of the forms to fit into the webpage design.

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

--
View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/How-modify-the-Look-and-Feel-of-the-forms-to-fit-into-the-webpage-design-tp3387096p3387096.html
Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.

Please do not print this email unless it is absolutely necessary.

The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments.

WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.

www.wipro.com


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Hi Haritha!

You can change the html structure in theme stylesheet:
http://wiki.orbeon.com/forms/doc/developer-guide/page-flow-epilogue#TOC-Theming

Theme stylesheet runs _after_ XForms has been converted into XHTML. If
this is not enough, you can put your HTML into XForms source _before_
that conversion. For this to work you have to turn on Orbeon
pre-processing in properties-local.xml:

<property as="xs:boolean" name="oxf.epilogue.xforms.preprocessing"
value="true"/>
<property as="xs:anyURI"  name="oxf.epilogue.xforms.preprocessing.uri"
value="oxf:/config/preprocess.xpl"/>

Simplest preprocess.xpl is like this:
<p:config xmlns:p="http://www.orbeon.com/oxf/pipeline"
xmlns:oxf="http://www.orbeon.com/oxf/processors">
<p:param type="input" name="data"/>
<p:param type="output" name="data"/>

<p:processor name="oxf:xslt">
<p:input name="config" href="preprocess.xsl"/>
<p:input name="data" href="#data"/>
<p:output name="data" ref="data"/>
</p:processor>
</p:config>

preprocess.xpl and preprocess.xsl both have to be in
WEB-INF/resources/config directory.

   Tambet

On 18.03.2011 14:41, haritha wrote:

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws