JQuery CSS ThemeRoller Mobile: Applying Theme A, B, C to different pages

Question

I'm trying to design a mobile app based on Themeroller CSS generated theme. Additionally the package includes:

• jQuery 1.9.1
• jQuery 1.3.0
• jquery.mobile.structure-1.3.0.min.css

Themeroller generated CSS file has three different themes (for three pages):

• Theme A (Blue)
• Theme B (Red)
• Theme C (Gray)

I've created everything in HTML5 and applied all above mentioned sources, but the result is all pages are in Theme A instead of another themes B and C respectively. Here is the JSFIDDLE version of the project.

I can not find where I'm going wrong. Any ideas?

<!-- Page 1 -->
<div data-role="page" id="firstPage" data-theme="a">
    <div data-role="header" data-position="inline">
        <h1>Page 1</h1>
        <a href="#" data-role="button" data-theme="a">!</a>
        <a href="#secondPage" data-role="button" data-theme="a">p2</a></div>
    <div data-role="content" data-theme="a" align="center">
    <!-- Content -->
    <h1>Test1 Test1</h1>
    <p>Text1 Text1</p>
    <select name="sound" data-role="slider" data-theme="a">
        <option value="0">Off</option>
        <option value="1" selected="selected">On</option>
    </select></div>
    <!-- /Content -->
</div>
<!-- Page 2 -->
<div data-role="page" id="secondPage" data-theme="b">
    <div data-role="header" data-position="inline">
        <h1>Page 2</h1>
        <a href="#firstPage" data-role="button" data-theme="b">p1</a>
        <a href="#thirdPage" data-role="button" data-theme="b">p3</a></div>
<div data-role="content" data-theme="b" align="center">
    <!-- Content -->
    <h1>Test2 Test2</h1>
    <p>Text2 Text2</p>
    <select name="sound" data-role="slider" data-theme="b">
        <option value="0">Off</option>
        <option value="1" selected="selected">On</option>
    </select></div>
    <!-- /Content -->
</div>
<!-- Page 3 -->
<div data-role="page" id="thirdPage" data-theme="c">
    <div data-role="header" data-position="inline">
        <h1>Page 3</h1>
        <a href="#secondPage" data-role="button" data-theme="c">p2</a>
        <a href="#" data-role="button" data-theme="c">!</a></div>
<div data-role="content" data-theme="c" align="center">
    <!-- Content -->
    <h1>Test3 Test3</h1>
    <p>Text3 Text3</p>
    <select name="sound" data-role="slider" data-theme="c">
        <option value="0">Off</option>
        <option value="1" selected="selected">On</option>
    </select></div>
    <!-- /Content -->
</div>

Answer 1

First this is a bug with jQuery Mobile but you can make it work if you remove data-theme from all of your data-role="page" div and move it to you data-role="header" div.

Working example: http://jsfiddle.net/Gajotres/ceBAj/

<!-- Page 1 -->
<div data-role="page" id="firstPage">
    <div data-role="header" data-position="inline">
        <h1>Page 1</h1>
        <a href="#" data-role="button" data-theme="a">!</a>
        <a href="#secondPage" data-role="button" data-theme="a">p2</a></div>
    <div data-role="content" data-theme="a" align="center">
        <!-- Content -->
        <h1>Test1 Test1</h1>
        <p>Text1 Text1</p>
        <select name="sound" data-role="slider" data-theme="a">
            <option value="0">Off</option>
            <option value="1" selected="selected">On</option>
        </select></div>
        <!-- /Content -->
</div>

<!-- Page 2 -->
<div data-role="page" id="secondPage">
    <div data-theme="b" data-role="header" data-position="inline">
        <h1>Page 2</h1>
        <a href="#firstPage" data-role="button" data-theme="b">p1</a>
        <a href="#thirdPage" data-role="button" data-theme="b">p3</a></div>
    <div data-role="content" data-theme="b" align="center">
        <!-- Content -->
        <h1>Test2 Test2</h1>
        <p>Text2 Text2</p>
        <select name="sound" data-role="slider" data-theme="b">
            <option value="0">Off</option>
            <option value="1" selected="selected">On</option>
        </select></div>
        <!-- /Content -->
</div>

<!-- Page 3 -->
<div data-role="page" id="thirdPage">
    <div data-theme="c" data-role="header" data-position="inline">
        <h1>Page 3</h1>
        <a href="#secondPage" data-role="button" data-theme="c">p2</a>
        <a href="#" data-role="button" data-theme="c">!</a></div>
    <div data-role="content" data-theme="c" align="center">
        <!-- Content -->
        <h1>Test3 Test3</h1>
        <p>Text3 Text3</p>
        <select name="sound" data-role="slider" data-theme="c">
            <option value="0">Off</option>
            <option value="1" selected="selected">On</option>
        </select></div>
        <!-- /Content -->
</div>