问题
I have customized theme have downloaded theme, added as reference but my mobile UI is not displaying me my custom theme :
Here is the custom theme:ThemeRoller Custom Theme and added it as in phonegap Android but no result:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="themes/converterThemeFinald.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/converterThemeFinald.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="converterListPage">
<div data-role="header">
<h1>UNIT CONVERTER</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#" id="tempButton">TEMPERATURE</a></li>
<li><a href="#" id="weightButton">WEIGHT</a></li>
<li><a href="#" id="currencyButton">CURRENCY CONVERTER</a></li>
<li><a href="#" id="speedButton">SPEED CONVERSION</a></li>
</ul>
</div>
</div>
How can I get my custom theme of theme Roller in my App please help me SCREEN SHOTS AFTER FOLLOWING ANSWER of Gajorates:
回答1:
Your problem is that you are blindly following jQuery Mobile theme-roller tutorial how to apply new theme. You have two new theme swatches A and B. And you are including them before you initialize full jQuery Mobile CSS who also has original A and B swatches. Because full jQuery Mobile CSS was initialized last its CSS will be applied over your custom one.
You can fix this problem in 2 different ways:
Remove this line:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
HTML example:
<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="test.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> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>Index page</h1> </div> <div data-role="content"> </div> </div> </body> </html>
To test this just replace test.css with your custom CSS.
Or you should initialize your CSS last:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <link rel="stylesheet" href="themes/converterThemeFinald.min.css" />
来源:https://stackoverflow.com/questions/18012517/i-am-not-getting-customized-ui-of-themeroller-in-mobile-for-phonegap-android