Custom theme/color for navbar tab jquery-mobile

Question

Good day!

I am using jquery-mobile 1.4.3 and trying to change navbar tabs to custom color. I tried using theme-roller and modifying Swatches from:

http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css

What I did was take above file, make a local copy, and change all occurrences of "background-color" to yellowgreen (it's not the color I want but just for testing) for Swatch A. I then use it in data-theme as follows:

<div role="navigation" class="ui-navbar ui-mini" data-role="navbar">
  <ul class="ui-grid-duo ui-grid-a">
    ....
    <li class="fareTabTop ui-block-a"><a class="ui-link ui-btn ui-btn-a" data-theme="a"  href=""  onclick="showDetails()">1268.00</a></li>
    ...
  </ul>
</div>

But it is not working this way.

This is the snippet of my index.html file how I reference my custom css:

<link rel="stylesheet" href="css/mycustom.css" type="text/css">
<!-- link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" / -->
<link rel="stylesheet" href="css/jquery-mobile-1.4.3.css">

So I changed jquery-mobile-1.4.3.css to have 'yellogreen' background for Swatch A.

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

I tried using theme-roller but that didn't work either.

My goal is to simply have navbar tabs with 1268.00 and 3114.00 have a different color. Only built-in theme 'b' is working (changed to black) but nothing else works.

Could somebody please help me find a solution to this problem?

Thank you, Victor.

Answer 1

I've solved the problem as follows:

1) Use theme-roller to change button color to color I wanted theme roller generates CSS for it. I called my theme "F". Important : the theme letter in theme-roller must match the data-theme I specified in my code. My problem was that in theme-roller I workd with theme under "A" but called (and referenced) created CSS file as theme "F" (for me it was a big problem). So oviously there was discrepancy. 2) place the resulting theme "F" (matched in theme-roller) to mycustom.css file and now I can use any color I want for my tabs :)