Let's say I would like to change the color of all <h1> elements to red in the Guess the Number sample application. How can I do that with Orbeon Forms 4.0+ CE?
With Orbeon Forms 3.9.0 CE, it's done as follows:
<xhtml:head>
<xhtml:title>Guess The Number</xhtml:title>
<xhtml:style type="text/css">
h1 {
color: red;
}
</xhtml:style>
...
However, when I tried the same with Orbeon Forms 4.5 CE it didn't work anymore:
<xh:head>
<xh:title>Guess the Number</xh:title>
<xh:style type="text/css">
h1 {
color: red;
}
</xh:style>
...
In order to make it work, I had to prepend my CSS rule with .orbeon as follows:
<xh:head>
<xh:title>Guess the Number</xh:title>
<xh:style type="text/css">
.orbeon h1 {
color: red;
}
</xh:style>
...
Is this the correct way to apply CSS styles at the moment? Is there a way to do this using "the good old method"? :) The reason why I am asking this is that I am about to update my old Orbeon Forms engine (3.x) to the latest version, as it includes tons of useful improvements (thanks guys!). If CSS rules need to be prepended, I will have to prepend (and possibly rewrite) CSS styles to all of my existing XForms web applications.
Since version 4.0, Orbeon Forms uses Bootstrap. Some users embed the forms produced by Orbeon Forms into existing pages, and wouldn't like the Bootstrap CSS to apply to the rest of the pages. To avoid this, the Bootstrap that comes with Orbeon Forms has been "patched" to add .orbeon in front of all the CSS rules. And so Orbeon Forms can more easily override Bootstrap rules when necessary, .orbeon has also been added in front of all the Orbeon Forms CSS rules.
As a result, if you want to override a Bootstrap or Orbeon Forms CSS rule, you need to make your selector "stronger", and adding .orbeon is one way of doing it. Note that if you're using a preprocessor like LESS, doing this for all your rules is quite easy. See for instance xforms.less.