jquery mobile data-theme not working

jquery jquery-mobile

13,493

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

13,493

Author by

Itay.B

Updated on September 15, 2022

Comments

Itay.B over 1 year

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>

Itay.B over 10 years

I have used the classic style sheet like you said and my page now looks like a dream. Thank you very much!
Omar over 10 years

@Itay.B You're welcome, I'm glad I've been of help :) just make sure to host it locally, you never know when jQM removes it ;)
The Duke Of Marshall שלום over 9 years

This wasn't exactly what I was looking for, but this answer and this conversation really helped me to eventually work through it. Thanks guys! Shalom!
Dibish over 9 years

Thank you so much for your comment