Import is broken

[hkirsman]

I imported default jQuery mobile theme. Although it loads the styles, changes are not shown in preview and even not saved.

I'm using Windows 7. Tried this in Firefox 8.0, latest Chrome and Safari.

[iotashan]

I have the exact same problem. Javascript error in the console is:

Uncaught TypeError: Cannot read property 'length' of null      app.js:936

My theme: https://gist.github.com/da722c0c151b6cfb5ee5

[commadelimited]

hkirsman, please review the CSS file you're trying to import. jQM ThemeRoller only imports uncompressed CSS files. Compare your CSS file to these:

http://gist.github.com/1376735 (Uncompressed jQuery Mobile Theme) http://gist.github.com/1376737 (Compressed jQuery Mobile Theme)

It appears that iotashan's "uncompressed" file is in reality the compressed version: http://screencast.com/t/SISEAOtUWWP0

[iotashan]

Seems that the downloader gave me a broken theme then. Perhaps this bug needs to be modified to reflect the real problem.

[tybenz]

iotashan - the downloader should give you two CSS files. [theme-name].css (uncompressed) and [theme-name].min.css (compressed). Was that not the case for you?

[iotashan]

Tyler - It gave me two files. The uncompressed file had 13 lines of comments, and one line of CSS. The minifed file has only one line of css. Ignoring the header on the uncompressed file, they look the same to me.

[iotashan]

Tyler - Here are the two files I got:

https://gist.github.com/83a74e2678052467823c

[tybenz]

Yeah that is odd. I can't seem to be able to recreate the bug. Did you import one of these compressed files before you did the download?

[iotashan]

Tyler -

The first thought that popped into my head was "how stupid do you think I am". The second thought was "oh, crap, I think he's right".

Sure enough, I did exactly that. So now, I can definitively say that the true issue is there's no error trapping when importing a theme to prevent stupid users from doing stupid things like importing the minified file like I did.

Upon further reflection, my confusion was that everything references "uncopmressed" files, and the download is a compressed zip file. So I uploaded the minifed file, and not only was there no error, but my style displayed beautifully. If it said "non-minified" files, I would have uploaded the right file the first time.

[eddiemonge]

Sounds like this is an a "Feature Request" that should be implemented: checking the uploaded file to see if it is the compressed/uncompressed file or if it is even usable.

[hkirsman]

I agree with iotashan, that it's confusing that I can upload compressed file without any warnings and it seems to work at first glance (preview shows correct styles)

I understand the problem now. But is uncompressed css ( jquery.mobile-1.0.css ) broken in jquery.mobile-1.0.zip? After import when I try to change something, preview looses all the styles. Using latest Chrome (Windows XP Pro).

[eddiemonge]

broken using 1.0rc3 css as well.

[hkirsman]

I figured out the bug with these css files.

Theme Roller breaks if linear gradient is without top parameter. So for now, quickfix is to search for linear-gradient( and replace it with linear-gradient(top,

Note that space is needed after ...top,

I cross-referenced the top parameter with http://www.colorzilla.com/gradient-editor/ example - it's being used there. While I did not check the w3c, I guess top is optional though.

[DeanMarkTaylor]

I can confirm that @hkrisman is correct, an issue does exist... with the current live version of the jQuery Mobile Theme Roller. (2011-11-30 14:37)

Steps to reproduce:

1. Open http://jquerymobile.com/themeroller/
2. Select "Import"
3. Paste in contents of this file: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css
4. Switch to Swatch A
5. Change the background color of "Content Body".

Expected result:

• Background color to update on swatch A to newly selected color

Actual result:

• Preview for all swatches appear to have their CSS settings lost.

Work around to import and edit the standard jQuery CSS file:

1. Open a copy of http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css in a text editor
2. Replace linear-gradient(# with linear-gradient(top, #
3. Use modified version of CSS with the jQuery Mobile Theme Roller import function.

[alaa9jo]

After downloading my custom theme from jquery mobile themeroller I couldn't import it again to modify it though I've used the uncompressed css,suggested workaround didn't work either

here is my css file: https://gist.github.com/3a33bbd19b2d226e6830

[hkirsman]

You have a slightly different problem. There's 1 swatch in your style and it's F.

So after import, add swatches until F is visible. That one looked okay to me.

[alaa9jo]

Thanks for your reply,what I meant is when I click on swatch F and want to change i.e button:Normal style I noticed the following:

1) my style info isn't loaded 2) when I make any changes styles on all swatches disappear

[santhoshkb]

Mr. DeanMarkTaylor Thanks it's worked for me

[tybenz]

DeanMarkTaylor is correct. Which means the problem is with jQuery Mobile's default theme. I submitted a pull request to fix this.

[drywall]

I realize this is closed but.... why not have the theme roller just start with the default jQueryMobile theme, rather than with its current A = B = C configuration?

[tybenz]

We want to encourage users to create their own themes from scratch rather than modifying the default theme

[tybenz]

There is now an "Import Default Theme" link in the import dialog

[drywall]

That's brilliant. Good idea, good work and thanks!

[hkirsman]

Tx!