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?

Community · Accepted Answer · 2017-05-23 10:24:05Z

4

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

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Apr 5, 2013 at 11:30

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

patriques Over a year ago

I tried it but it does not work. The page still renders the h2 tag black. Thanks anyway..

Gajotres Over a year ago

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.

patriques Over a year ago

Its not, how come this is the problem? I have a custom css for this page only

Gajotres Over a year ago

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.

patriques Over a year ago

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 ;-)

|

Collectives™ on Stack Overflow

custom css don't render on jquery mobile page

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related