jquery mobile data-theme not working

jquery, jquery-mobile

Solution

Update

The classic theme should be upgraded to work properly with jQuery Mobile 1.4.x

Upgrade guide

Unlike old versions of jQuery Mobile, the latest version 1.4 has only two themes/swatches a and b. The latter is dark/black theme.

You can either create your own themes using ThemeRoller.

Use classic style sheet offered by jQuery Mobile, along with default style sheet.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.0/theme-classic/theme-classic.css" />

Demo

Problem

I have a simple log in page and I'm trying to apply theme "b" to it, but it doesn't work. The page looks dark and not the way theme b should look like. Any idea? Thanks. My header ``` <link rel="shortcut icon" href="img/favicon.ico"> <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.0.min.css"> <!--<link href="css/ios_inspired/styles.css" rel="stylesheet" />--> <!--<link rel="stylesheet" href="css/jqm-demos.css">--> <script src="js/jquery.mobile-1.4.0/jquery.js"></script> <script src="js/jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js"></script> </head> <body> <div data-role="page" id="Page_Login" data-quicklinks="true" data-theme="b" > <div data-role="header" > <h1>My header</h1> </div> <div role="main" class="ui-content jqm-content jqm-fullwidth" data-theme="b" > <h1 style=" text-align:center;">Connect</h1> <form dir="rtl"> <!--<div data-role="fieldcontain" >--> <label for="txtEmail">email:</label> <input type="email" name="txtEmail" id="txtEmail" value="" /> <!--</div> --> <!--<div data-role="fieldcontain" >--> <label for="txtPassword">password:</label> <input type="password" name="txtPassword" id="txtPassword" value="" /> <!--</div> --> <a href="" data-transition="flip" class="ui-btn ui-corner-all" onclick="MemberLogIn()">connect</a> </form> </div><!-- /content --> </div><!-- /page --> </body> ```

Original source

Related problems