Currently, I am encountering an issue where I want to utilize ThemeRoller for implementing custom themes on my views. However, when I apply these themes, the interface ends up looking distorted, as shown in the images below:
Before using ThemeRoller:
After applying ThemeRoller:
ThemeRoller with a refresh:
The same problem occurs with my navigation menu: Initially it looks like this:
But after applying the theme, it changes to this:
I have followed the instructions provided by ThemeRoller and ensured that I am using the correct version that matches my jQuery 1.0.1 version. The stylesheet has also been imported in the proper 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 there is any crucial information missing, please feel free to leave a comment so I can provide it!
Thank you 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, following this format:
<!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>