jQuery Forum

Hello,

I just ran into the following type of problem. Let's assume I have changed the border-width of the class .ui-body-d from 1px to 2px and placed the style definition in an external stylesheet after the jquery mobile structure and theme style sheets as recommended by the documentation (http://jquerymobile.com/demos/1.1.0/docs/api/themes.html). Now my page content suddenly showed a border although it had no border before.

Hence, the recommended approach of including custom style sheets won't work. Because styles are applied according to their cascading order and one of those order rules states that the style definition specified last is applied my custom style definition again overrides the .ui-content class (http://www.w3.org/TR/CSS21/cascade.html#cascade).

As a consequence we have to preserve the order of all styles so that we have to make our changes to a complete set of jquery mobile theme or structure styles. Defining individual styles in a separate style sheet and appending it after the default jquery mobile style sheets is not possible. If we only change the theme we can copy the jquery default theme make our changes and place the jquery mobile structure style sheet after our changes so that the original order of all jquery mobile styles is preserved:

1. <link rel="stylesheet" href="../css/my_custom_theme.css/> <!-- Contains all style definitions from jquery.mobile.theme-1.0.0.css with our custom changes -->
2. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.css"/>

Can anybody confirm this approach or am I missing something here?