Themeroller header and Phonegap

Question

I'm developing an android app in html with the help of Phonegap.

I made my own app theme with Themeroller

The theme shows up great in IE and Chrome however not in my mobile. The Themeroller theme I made gets replaced with a standard theme. I'm not the only one and many other have had the same problem, see here. However, by reading the solutions I have not been able to produce any own solutions.

I would like some help to rewrite my code.

This is my code.

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

Thanks in advance.

score 1 · Accepted Answer · answered Aug 30 '14 at 21:34

Here is the code that is the solution to my problem:

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/jakt.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="jquery.mobile.structure-1.4.3.min.css" /> 
  <script src="jquery-1.11.1.js"></script> 
  <script src="jquery.mobile-1.4.3.min.js"></script>

I removed <meta charset="utf-8" /> since it would not display scandinavian letters correctly. I also made the files local although the code above works fine with urls.

Martín Alcubierre · Answer 2 · 2014-08-30T20:58:19.363

0

When including jQueryMobile Themeroller you have to include a file with the base css: http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.2.min.css and not the standard one. This file is downloaded from the site with your custom css:

<!DOCTYPE html>
<html>
<head>

  <title>jQuery Mobile page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script> 

</head>

Your code should be:

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

edited Aug 30 '14 at 20:58

answered Aug 30 '14 at 20:35

Martín Alcubierre

4,341
1
27
27

If I remove "" as you did in your code my browser will not load the theme correctly. – user3904924 Aug 30 '14 at 20:53
Have you put instead http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.2.min.css ? – Martín Alcubierre Aug 30 '14 at 20:58
I tried now. Unfortuently when I do that it does not even load standard theme. – user3904924 Aug 30 '14 at 21:12
Does is downloaded properly? Inspect with console if all files are correctly downloaded. You can download files locally if it fails. – Martín Alcubierre Aug 30 '14 at 21:15
I think I'm near the solution now, give me some minutes and I'll rewrite my code above. – user3904924 Aug 30 '14 at 21:19

Themeroller header and Phonegap

2 Answers2