JQuery Mobile – Lesson 04 – Themes
Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05
1. Here We will learn about JQuery Mobile Themes.
2. Browse to http://themeroller.jquerymobile.com/
3. Select a Theme or click on Add Swatch to create new theme, looks at the rights side of the following picture:
4. Drag colors from colors plate directly to the new created swatch, theme.
5. Once finished designing the theme then click of download button, then you will see the following picture:
6. At picture at #5 copy and paste the two lines that starts with <link rel=.
7. Download the ZIP file.
8. Open the downloaded ZIP file and copy the directory THEME from there and place it next to index.html file.
9. At index.html file replace the line that starts with <link rel=, replace it with the two lines from #6.
10. Index.html should look like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<!--
1. Remove The css/.
2. Change my-custom-theme to the name that you selected at http://themeroller.jquerymobile.com/
3. Add to page div data-theme with the swatch leffter that you selected.
-->
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-theme="d">
<div data-role="header">
<h1>Page 1 header</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Page 1 Main</h1>
<a href="#page2" data-transition="flow">page 2</a>
</div>
<div data-role="footer">
<h1>Page 1 footer</h1>
</div>
</div>
<div data-role="page" id="page2" data-theme="d">
<div data-role="header">
<h1>Page 2 header</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Page 2 Main</h1>
<a href="#page1" data-transition="flow">page 1</a>
</div>
<div data-role="footer">
<h1>Page 2 footer</h1>
</div>
</div>
</body>
</html>
11. At the lines that starts with <link rel.., remove “css/”, as shwon at #10.
12. Change my-custom-theme.css to a theme name that you selected at :
http://themeroller.jquerymobile.com/
13. Add data-theme to the page div as shown at #10.