custom css don't render on jquery mobile page

Question

Can someone enlighten my why my css dont show. I have a custom css in a file with only this line:

my_own_stylesheet:

 .test {
    color: #f00;  /* Red */
}

And a simple page like this:

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" href="css/my_own_stylesheet.css" />
    <script src="js/jquery-1.9.1.min.js">
    </script>
    <script src="js/jquery.mobile-1.3.0.min.js">
    </script>
    <script type="text/javascript" src="cordova-2.5.0.js">
    </script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="sedelPage">
        <div data-diveme="a" data-role="header">
            <h3>
                Sedel
            </h3>
        </div>
        <div data-role="content">
          <h2 class="test">Test</h2>       <!-- this is supposed to be red -->

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

I cant figure this out. Isn't it possible to style own elements in jquery-mobile?

score 4 · Accepted Answer · edited May 23 '17 at 10:24

You need to use it like this:

.test {
    color: #f00 !important;  /* Red */
}

Because heading tag already have set color style you need to override it with !important.

There could also be another possibility. Lets say this is your second page. When jQuery Moible loads pages after the initial one (with ajax), it will only load its BODY content, which means any js or css file initialized in HEAD (and if it is not initialized in first loaded HTML) will be disregarded. So all your custom css will never be applied.

Working example: http://jsfiddle.net/Gajotres/yKE8W/

Example made from your own code:

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <style>
        .test {
            color: #f00 !important;  /* Red */
        }
    </style>
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="sedelPage">
        <div data-diveme="a" data-role="header">
            <h3>
                Sedel
            </h3>
        </div>
        <div data-role="content">
          <h2 class="test">Test</h2>       <!-- this is supposed to be red -->

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

If you want to find out more than take a look at my other answer: Why I have to put all the script to index.html in jquery mobile

I tried it but it does not work. The page still renders the h2 tag black. Thanks anyway.. — patriques, Apr 05 '13 at 11:36
It cant be. If it work in my example it should work also in yours. Tell me one thing. Your page, is it the first page to load? Because if it is not than that could be the problem. — Gajotres, Apr 05 '13 at 11:41
Its not, how come this is the problem? I have a custom css for this page only — patriques, Apr 05 '13 at 11:42
Lets say this is your second page. When jQuery Moible loads pages after the initial one (with ajax), it will only load its BODY content, which means any js or css file initialized in HEAD (and if it is not initialized in first loaded HTML) will be disregarded. — Gajotres, Apr 05 '13 at 11:46
Your completely right. If you can edit your comment it would be great for others to come with the same problem. I mean so they do not think that the solution was because of the "!important" addition. I have spent many hours on this, I would not like others to spend it in the same way ;-) — patriques, Apr 05 '13 at 11:53

custom css don't render on jquery mobile page

1 Answers1