Menu
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?
287
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
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
