jQuery Forum

I run a few apps for clients and have just a single jQM css file I use with custom themes setup in it. I prefer naming things semantically so for a purple theme I named the classes with "-purple" i.e - ".ui-btn-up-purple". And obviously to use it, I just change the data-theme value to "purple" where appropriate.

Everything works fine except when controls are automatically generated such as the header and the back/home buttons that can be added. Let's say on one of my pages I have the following header:

1. <div data-role="header" data-theme="purple">
        <h1>Contact Me Now</h1>
        <a href="/mobile/index.php" rel="external" data-icon="refresh" class="ui-btn-right">Home</a>
   </div>

When the anchor tag gets transformed automatically by jQM into a button, it adds the class "ui-btn-up-p" and sets the data-theme property to "p" so basically it truncates all but the first letter of the theme it inherits. The short term fix for me is just naming things by single letter only (so changing "-purple" to just "-p") so it all plays nice but don't see any reason why this should be doing this especially for flexible, semantic layouts.