jquerycssasp.net-mvcjquery-mobilejquery-mobile-themeroller

ThemeRoller for jQuery messes up the UI

I am facing the following problem: I'd like to use ThemeRoller to apply custom themes to my views. But as soon as I use them, the interface gets messed up, see the pictures below:

Without ThemeRoller:

Without theme Roller

With ThemeRoller:

With ThemeRoller

With ThemeRoller, refreshed:

With ThemeRoller, refreshed

Same goes for my navigation menu: From this:

enter image description here

To this:

enter image description here

I have used the ThemeRoller as explained on their side. I am using the correct Version of ThemeRoller, matching my jQuery version 1.0.1 . I have imported the file in the correct order:

<link rel="stylesheet" href="~/Themes/CustomTheme2.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

If you miss any information, please leave a comment and I will provide them!

Thanks in advance!

EDIT_1:

Instructions from ThemeRoller:

To use your theme, add it to the head of your page before the jquery.mobile.structure file, like this:

<!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="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 

</head>
Solution

  • As per my knowledge, js that creates/ apply styles to all the elements is rendering for twice. try to check that in console.