Adding custom CSS to forms

Hi,

I am trying to add CSS to my forms, so I have followed the below:

Place your CSS file(s) under one of the following recommended locations
\Apache-tomcat-8.5.11\webapps\orbeon\WEB-INF\resources\forms\assets\styles.css


Modied the Properties-local.xml to include the following:
property
    as="xs:string"
    name="oxf.fr.css.custom.uri.*.*"
    value="/forms/assets/Styles.css"/>

Added the following entries as well for IE:
 <property
     as="xs:boolean"
     name="oxf.xforms.minimal-resources"
     value="true"/>
 <property
     as="xs:boolean"
     name="oxf.xforms.combine-resources"
     value="true"/>


Now if I want to add a specific css class to a text box (I go to the custom classes and specify the expression ).Table (assume that the .Table is defined in Styles.css)

Can you confirm if the steps followed above is correct since the styles do not appear. (Have restarted the Server)

Regards

Hi Ramesh,

If the file is named styles.css, make sure you use styles.css with a lowercase "s"  in `oxf.fr.css.custom.uri.*.*`, as some file systems are case-sensitive.

And you don't need to set `oxf.xforms.minimal-resources` and `oxf.xforms.combine-resources` to true, as this is the default.

Then I'd check if you CSS is loaded, by adding to the CSS a rule like `* { color: red }`. If that works, then you can go ahead and style the page. As usual with those things, a tool like the Chrome Dev Tools is your friend.

Finally, no, you don't need to restart the server when changing the CSS, or modifying the aforementioned properties.

Alex

Hi,

Thanks for replying,

If I try to specify *{color: red } then it throws an error related to invalid expression (from Logs). Can you kindly specify I am missing anything.


eg: If I  assume I have a following property in my stylesheet,

.bgActive
{
    background-color: #F1EEEE;
}

What should my expression in Custom CSS Classes for Text Boxes be in UI for Orbeon. Also how can I check that my style sheet is indeed being loaded in orbeon.

Regards

Hi Ramesh,

What is the error you are seeing when you change the CSS?

> What should my expression in Custom CSS Classes for Text Boxes be in UI for Orbeon

The CSS doesn't go in the Form Builder UI, but in a CSS file you reference from the `oxf.fr.css.custom.uri.*.*` property.

> Also how can I check that my style sheet is indeed being loaded in orbeon.

I suggested adding `* {color: red }` to your CSS for that purpose: to first check if you see all text in red. Once that works, you know your custom CSS is used, and you can change it to do what you want.


Alex