Wrong CSS file weights [#1541720]

The module produce wrong weights of CSS files.

The error exist only if the module enabled.
If the module not enabled, the correct CSS file weights are used from the JQM theme with their defined weights. BUT, not the two weights of the Next thing below.

The result:

The theme CSS file is not the last CSS file!

Thus it is not possible to overwrite formattings in

"jquery.mobile-1.0.1.css"
"jquery.mobile.structure-1.0.1.css"

with the theme CSS file or subtheme CSS file.

Next thing

The next thing is the wrong weight of the JQM files 1. and 2..

I think, the jquery.mobile.structure CSS file extend the jquery.mobile CSS file.

To follow this, the jquery.mobile.structure CSS file MUST be linked AFTER the jquery.mobile CSS file!

Solution

Proper weights of CSS files:

jquery.mobile CSS file
jquery.mobile.structure CSS file
jQuery Mobile theme CSS file

This is very important to fix this bug to allow the good use of JQM subthemes.

Comment	File	Size	Author
#5	Screen Shot 2012-04-30 at 5.24.22 PM.png	50.52 KB	jasonsavino
#5	Screen Shot 2012-04-30 at 5.24.12 PM.png	50.92 KB	jasonsavino

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

adamjanzen CreditAttribution: adamjanzen commented 28 April 2012 at 18:08

Using the jquery mobile themeroller, it also suggests putting the structure CSS after the theme file:

<link rel="stylesheet" href="themes/TestTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />

Probably need to look further into why this is done by default.

Comment #2

jasonsavino CreditAttribution: jasonsavino commented 28 April 2012 at 19:10

I believe that in both the module and the theme there should be an option to use the default jquerymobile css files or the structure plus custom css files. There is no need to use the structure css file when using the default css. so the end result would be:

DEFAULT:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

CUSTOM:

  <link rel="stylesheet" href="sites/all/THEME/css/my-custom-theme.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

Comment #3

minorOffense CreditAttribution: minorOffense commented 28 April 2012 at 20:50

This means we'll probably have to register the weight of the default structure css file to allow other modules/themes to position themselves above it.

Comment #4

quiptime CreditAttribution: quiptime commented 30 April 2012 at 09:24

@Jason,

the CSS file weights in #2 are wrong!

Thats is correct:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="sites/all/THEME/css/my-custom-theme.css" />

The ultimate authority must always be the CSS file of the theme.

This is a golden rule of Drupals theming.

Comment #5

jasonsavino CreditAttribution: jasonsavino commented 30 April 2012 at 21:39

Status:

Active

» Needs review

File	Size
Screen Shot 2012-04-30 at 5.24.12 PM.png	50.92 KB
Screen Shot 2012-04-30 at 5.24.22 PM.png	50.52 KB

The structure file is not to be used with the default swatches. It is to be used in such cases as a theme created with themeroller. I agree that the placement of the Drupal theme css file was incorrect but that was by design. Placing it there allowed the swatches to be overridden at the correct time.

After careful thought, I decided to split the styles into 2 files in the mobile_jquery theme and will move similar functionality to the module shortly.
Also, new theme settings have been introduced and can be seen in the attached images.

If the structure file is disabled the following code is added:

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" media="all" />
<link type="text/css" rel="stylesheet" href="/sites/all/themes/mobile_jquery/styles/mobile_jquery.css" media="all" />

If the structure file is enabled the following code is added:

<link type="text/css" rel="stylesheet" href="/sites/all/themes/mobile_jquery/styles/jquery.mobile.overrides.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" media="all" />
<link type="text/css" rel="stylesheet" href="/sites/all/themes/mobile_jquery/styles/mobile_jquery.css" media="all" />