How to make jquery mobile custom theme generated with themeroller work?

Question

I created a custom jquery theme on jquery themeroller and downloaded it, as the instructions said, I have included the following line on the head part of the html file, should I also tranfer the css file to my server? if so should it be all files?

<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="themes/MyCustomTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Answer 1

I will tell you what to do but lets go from the beginning, I will talk from a perspective of jQuery Mobile 1.3.2, same logic works for older versions. To work with jQuery Mobile two files are needed (I am not counting basic jQuery):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" /> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"></script> 

jQuery Mobile CSS files can also be split to theme file and structure file and they can be found in a compressed framework file. What you already know if you want to add new themes over the classic ones you will need to use

If you want to add new themes (or swatches) you will need to use jquery.mobile.theme-1.3.2.css file, import it into theme builder tool and add new themes/swatches. Minimized theme CSS file can't be used here, it must be uncompressed.

When new themes are finished you will be prompted to download zip file containing your new theme file. Now we are ready to implement new themes. First unzip downloaded file and save it somewhere (specially if you intend to modify it later). There you will find 1 HTML file, 2 css files and images directory. Pick a CSS file (anyone will do, but if possible use minified file) and upload it to your server.

Now open your HTML files and add a link to your new CSS file (link that points to your server) and add it after the original CSS file, because new themes also have old ones you will not need to use structure.css file.

But this is not over, from your comment I can see you have already uploaded your file but you cant access it. If your server is Linux/Unix based you will need to give your new CSS file new permissions so they can be accessed from outside.

This line can be used to give it correct permissions (again in case of Linux and Unix):

sudo chmod 666 <filename>

Working example: http://jsfiddle.net/Gajotres/PMrDn/35/

In the end you will only need these files:

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="http://socialmedia.mobilevelocity.co.uk/CS408/MySocialStream.min.css" />
    <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"

Answer 2

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/MyCustomTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 

You just missed the structure file. You can use CDN still