jQuery mobile ThemeRoller bug?

Question

I used the ThemeRoller to create 2 different buttons (Theme C and D) with custom background color and styles. Then I imported the stylesheet and used it in my Asp.Ner mvc4 project. While the buttons are styled as expected, the list items and the buttons have lost their images.

My web project is using theme B for everything else.

Then I tried to load http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.css into the ThemeRoller hoping that those icons won't get lost and created theme F and G.

The same thing happens when using it in the project. The list items loses the pretty right arrow icons and the back button loses the left arrow icon. Didn't check the other icons.

Has anybody else come across the same problem?

Answer 1

You are probably missing the icon pack. Download the jquerymobile complete zip, copy images folder to where you have your project. That should do it. It usually contains the following files: ajax-loader.gif, ajax-loader.png, icons-18-black.png, icons-18-white.png, icons-36-black.png,icons-36-white.png

Answer 2

I had the same issue with my custom jQuery Mobile 1.1.0 theme (missing icons in IE8). However, when I downloaded the default theme from ThemeRoller and used it on my site, the icons were displayed correctly.

I found out that when you as much as click into the DISC COLOR and DISC OPACITY settings, even without actually changing these settings, and then download the default theme, the background color in the following code in the .css file is changed from #666666 (the default setting) to #FFFFFF.

.ui-icon,
.ui-icon-searchfield:after {
background: #666666 /*{global-icon-color}*/;

I edited my custom stylesheet to have a background color of #666666 and the icons became visible in IE8.

This same behaviour also applies to the two DEFAULT ICON settings, and to different versions of jQuery Mobile (e.g., 1.2.0).