search

jquery / themeroller.jquerymobile.com

ThemeRoller site for jQuery Mobile
Other
140 stars 73 forks source link

ui-link class generated with themeroller always get defined in "C" theme #56

Closed nacesprin closed 12 years ago

nacesprin commented 12 years ago

Hello. I've realised when downloading a themeroller, in the index.html packed in the zip, the tag:

< a href="#" class="ui-link" > link < /a >

ALWAYS get the ui-link.C theme. Even if you set a data-theme="X", the link ALWAYS is setted by theme "C"

agcolom commented 12 years ago

Hi,

it looks like it does but only if you have <div class="ui-body ui-body-a">, <div class="ui-body ui-body-b">, or <div class="ui-body ui-body-c">.

If your have <div class="ui-body ui-body-d"> to a higher theme letter, it gets the correct theme.

So to summarize, the link inherit the correct theme from body for themes higher than c (not part of the hard-coded default a-c ), otherwise, the theme inherited is c.

nacesprin commented 12 years ago

Yes, that is it. So...this is a bug, doesn't?

agcolom commented 12 years ago

Yes, it is a mistake. Not sure what is causing it... Maybe if I get a chance to look at the code later... In the mean time, you may want to choose a theme > c. I tend to not overwrite the default a-e, so may be a good idea in general to create your own theme from f.

agcolom commented 12 years ago

Actually, it seems that if you change the produced code to have the proper div with data-role page and data-role content, you will get the correct link theme. The code produced by ThemeRoller doesn't have those data-role attributes. Could you check this and let us know whether this is working for you?

nacesprin commented 12 years ago

Excuse me agcolom, but I don't understand what are you saying me. Could you write me a strip of code by example you are referring?

Thanks!

agcolom commented 12 years ago

Sure...

Here is what you get in your index.html page when you download the theme:

 <!DOCTYPE html>
 <html>
 <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile: Theme Download</title>
        <link rel="stylesheet" href="themes/try22.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css" />    
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    </head> 
    <body> 

        <div class="theme-preview">
          <div data-role="header" data-position="inline">
            <h1>It Worked!</h1>
          </div>

         <div class="ui-body ui-body-a">
            <p>Your theme was successfully downloaded. You can use this page as a reference for how to link it up!</p>
            <pre>
 <strong>&lt;link rel=&quot;stylesheet&quot; href=&quot;themes/try22.min.css&quot;&gt;</strong>
 &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css&quot; /&gt; 
 &lt;script src=&quot;http://code.jquery.com/jquery-1.6.4.min.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js&quot;&gt;&lt;/script&gt;
        </pre>
        <p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>
            <label for="slider1">Input slider:</label>
            <input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="a" />
             <fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
                <legend>Cache settings:</legend>
                    <input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
                    <label for="radio-choice-a1">On</label>
                    <input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off"  />
                    <label for="radio-choice-b1">Off</label>
            </fieldset>
    </div>

     </div>

 </body>
 </html>

replace <div class="theme-preview"> with <div data-role="page" data-theme="a"> (if a is the theme you want to use)

and also replace <div class="ui-body ui-body-a"> with <div data-role="content" data-theme="a"> (if a is the theme you want to use)

see below the new section:

  [...]
   <body> 

<div data-role="page" data-theme="a">  
    <div data-role="header" data-position="inline">
        <h1>It Worked!</h1>
    </div>

    <div data-role="content" data-theme="a">
        <p>Your theme was successfully downloaded. You can use this page as a reference for how to link it up!</p>
        <pre>
  [...]
tybenz commented 12 years ago

Thanks agcolom for the tip! I've added these changes to the exported code in ThemeRoller.