Custom CSS in Orbeon

Hi,

I need to change the UI of the orbeon forms. I tried with 'forms=>assets'
CSS overriding. Is there another way to replace all the orbeon default CSS
with my custom CSS. Please help me out to achieve this.

Regards,
Neenu Jacob

--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

CONTENTS DELETED

Hi Neenu,

There are some internal properties that specify what built-in CSS is
included in the pages. As of 2017.1, see the properties defined here:

https://github.com/orbeon/orbeon-forms/blob/tag-release-2017.1-ce/src/main/resources/config/properties-internal.xml#L151

However, instead of starting by completely removing the built-in CSS, it is
often easier to instead override existing rules, adding your own rules with
a higher specificity, which will thus take precedence over the built-in
rules.

I hope this helps,

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

Hi,

Already I tried out this method. Instead of writing custom CSS to each and
every classes, I need to overwrite orbeon CSS with my CSS file. I need to
remove all the orbeon specific style classes and place my custom CSS files.
How could I achieve this?

Regards,
Neenu Jacob

--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

Neenu, assuming you're on 2017.1, you can try setting the following
properties:

<property as="xs:string"  name="oxf.fr.css.uri.*.*"/>
<property as="xs:string"  name="oxf.fr.detail.css.uri.*.*">

This will remove all Form Runner CSS. But then of course, there will be a
lot you'll need to do in your own CSS for things to look reasonable again.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

Alex,

I am using Orbeon version 2016.3. Do I need to upgrade to 2017.1 for
achieving this?


Regards,
Neenu Jacob

--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

Hi,

By setting the properties (given below) only remove 'form-runner-base.css'.


<property as="xs:string"  name="oxf.fr.css.uri.*.*"/>
<property as="xs:string"  name="oxf.fr.detail.css.uri.*.*">

Need to remove 'form-runner-bootstrap-override.css' and 'bootstrap.css'

Thanks,
Neenu Jacob


--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

Neenu, my bad: a `/` was missing at the end of the second property. So you
should have:


<property as="xs:string"  name="oxf.fr.css.uri.*.*"/>
<property as="xs:string"  name="oxf.fr.detail.css.uri.*.*"/>

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

Alex,

Orbeon forms is starting after setting the property. But able to remove only
the 'form-runner-base.css'. But I need to remove
'form-runner-bootstrap-override.css' and 'bootstrap.css'.  Please look at
the screenshot. I need to remove the yellow highlighted CSS.

Can we set the properties given in the following link to achieve this.

https://doc.orbeon.com/configuration/advanced/javascript-css-assets.html#baseline-of-xforms-assets

Regards,
Neenu Jacob

<http://discuss.orbeon.com/file/t375510/formrunnerCSS.png> 

--
Sent from: http://discuss.orbeon.com/

--
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+unsubscribe@googlegroups.com.
To post to this group, send email to orbeon@googlegroups.com.

Hi Neenu,

Those are included by default for all forms, even those written "by hand" in
XForms, and not just those created with Form Builder. So to remove those CSS
files, you'll want to redefine the property `oxf.xforms.assets.baseline` as
done in at  line 218 of `properties-xforms.xml`
<https://github.com/orbeon/orbeon-forms/blob/tag-release-2017.1.1-ce/src/main/resources/config/properties-xforms.xml#L218>  
(in Orbeon Forms 2017.1.1), and remove the references to `bootstrap.css` and
`form-runner-bootstrap-override.css`.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

Hi,

Thanks. Now I am able to remove all the orbeon specific CSS.

Also, I need to apply bootstrap themes to Orbeon forms. I set the property
as below. But it is not applying properly.

 <property as="xs:string" name="oxf.fr.css.uri.*.*"
value="/forms/assets/bootstrap.paper.css"/>

1) Do we have another way to achieve this. If so, how?

2) Can I apply two separate style sheets for desktop & mobile view?


Thanks,

Neenu Jacob

--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].

Hi Neenu,

1. I think you have a typo in your property name:

oxf.fr.css.uri.*.* ← this is what you have
oxf.fr.css.custom.uri.*.* ← what the property should be

Also see the  Form Runner doc on adding your own CSS
<https://doc.orbeon.com/configuration/properties/form-runner.html#adding-your-own-css>
.

2. You will want to use  RWD
<https://en.wikipedia.org/wiki/Responsive_web_design>   media queries for
this.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
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 [hidden email].
To post to this group, send email to [hidden email].