Custom CSS in Orbeon

[Neenu Jacob]

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/

[bruno.buzzi]

Hi,

To overwrite CSS in properties-local.xml:

<property as="xs:string" name="oxf.fr.css.custom.uri.app-name.form-name"
value="/forms/assets/my-styles.css"/>

To overwrite for all:
<property as="xs:string" name="oxf.fr.css.custom.uri.*.*"
value="/forms/assets/my-styles.css"/>

Here you can overwrite Orbeon styles.

regards,
bruno

[Alessandro Vernet]

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

[Neenu Jacob]

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

[Alessandro Vernet]

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

[Neenu Jacob]

Alex,

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


Regards,
Neenu Jacob

[Neenu Jacob]

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

[Alessandro Vernet]

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

[Neenu Jacob]

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.

Regards,
Neenu Jacob

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

[Alessandro Vernet]

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

[Neenu Jacob]

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

[Alessandro Vernet]

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