CODEWITHSUNDEEP
cssjquery-mobile
最白目
最白目

Reputation: 3644

Apply CSS to data-role="page" in jquerymobile

I have this page

<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">

<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/> 
    <link rel="stylesheet" type="text/css" href="application.css"/>

<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>

<script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", initApp, false);

</script>
</head>
<body>
<div data-role="page" id="start"> 

    ...

</div>
</body>

I read here that I can apply styles for the whole data-role="page" container by doing this

.ui-page {
   background: #eee;
}

but it doesnt work. My background for the page is always white. I dont want to use JQM styles. How can I apply my body-styles to the jquery mobile "page"?

Upvotes: 0

Views: 15736

Answers (2)

codaniel
codaniel

Reputation: 5253

.ui-content will style the data-role=content area. So for example if you want to style the whole page area you would do this:

.ui-content, .ui-page{background: #eee;}

Keep in mind you will have to move your css underneath the JQM style sheet as someone else already suggested.

Here is an example of it working http://jsfiddle.net/codaniel/7M4Pg/1/

Upvotes: 2

saluce
saluce

Reputation: 13350

You need to move the application.css header below the framework css files, because your styles are being overwritten by the framework loading. Alternatively, you can add !important to the background rule, like background: #eee !important;, to prevent being overwritten by later stylesheets.

Upvotes: 1

Related Questions