Adding custom CSS to forms

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Adding custom CSS to forms

RameshBhat
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

Reply | Threaded
Open this post in threaded view
|

Re: Adding custom CSS to forms

Alessandro  Vernet
Administrator
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
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
Reply | Threaded
Open this post in threaded view
|

Re: Adding custom CSS to forms

RameshBhat
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
Reply | Threaded
Open this post in threaded view
|

Re: Adding custom CSS to forms

Alessandro  Vernet
Administrator
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
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet