how to add a custom theme in jquery mobile from theme roller site?
I am trying to add a custom theme in my jquery mobile site.
I visited the theme roller site , i designed a theme and then i downloaded a zip file.
Inside there is a themes folder and an index.html . Inside the themes folder there is an images folder and 2 CSS files :
1) customTheme.css
2) customTheme.min.css
I copy-pasted the 2) in my project folder.
Then in my project i do :
<head>
<meta charset="utf-8">
<title>CEID</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="customTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="custom.css" />
</head>
It should work right? What am i doing wrong here?
The theme doesnt work..
What i am designing looks like this :
What i get looks like this :
My html looks like this :
<head>
<meta charset="utf-8">
<title>CEID</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/CustomTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
The custom CSS i was using :
/* Home page banner */
h2#banner {
background:transparent url(images/banner.png) no-repeat left 10px;
width:220px;
height:250px;
margin:-10px auto -150px auto;
text-indent:-9999px;
}
/* Home page banner landscape */
.landscape h2#banner {
background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
width:480px;
height:290px;
margin:-10px auto -175px auto;
text-indent:-9999px;
}
.ui-listview .ui-li-icon {
max-height: 32px !important;
max-width: 32px !important;
}
/* Home page icons */
.ui-li-icon {
top:0.4em !important;
}
/* Make room for icons */
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon {
padding-left:47px;
}
The body of my html:
<body>
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
<h2 id="banner">CEID Mobile</h2>
<div class="menu_list">
<ul data-inset="true" data-role="listview">
<li><a href="information.html"><img src="images/info.png" alt="Information" class="ui-li-icon">Πληροφορίες</a></li>
<li><a href="staff.html"><img src="images/staff.png" alt="Staff" class="ui-li-icon">Προσωπικό</a></li>
<li><a href="research.html"><img src="images/research.png" alt="Research" class="ui-li-icon">Έρευνα</a></li>
<li><a href="undergraduates.html"><img src="images/undergraduates.png" alt="undergraduates" class="ui-li-icon">Προπτυχιακά</a></li>
<li><a href="metaptyxiaka.html"><img src="images/graduates.png" alt="Graduates" class="ui-li-icon">Μεταπτυχιακά</a></li>
<li><a href="students.html"><img src="images/students.png" alt="Students" class="ui-li-icon">Φοιτητές</a></li>
<li><a href="news.html"><img src="images/news.png" alt="News" class="ui-li-icon">Ανακοινώσεις</a></li>
</ul>
</div>
<div class="menu_list">
<ul data-inset="true" data-role="listview">
<li><a href="http://www.ceid.upatras.gr"><img src="images/info.png" alt="Information" class="ui-li-icon">Μεταφορά στον Ιστότοπο</a></li>
</ul>
</div>
</div>
</div>
</body>
Answer
Your example won't work, take a look what you have :
<link rel="stylesheet" href="customTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
There are 3 different css files. First one is your custom theme, second one is only structure css file (everything else), and last one is complete jQuery Mobile css file. Currently your last css file (complete one) is overriding custom css theme.
To solve your problem change everything to:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="customTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
Or even better remove jquery.mobile-1.3.1.min.css and use only:
<link rel="stylesheet" href="customTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
What you need to understand, jQuery Mobile have 3 available css files. jquery.mobile-1.3.1.min.css should be used alone because it hase css for themes and structure. If you have custom themes then you only need to use custom theme css file and jquery.mobile.structure-1.3.1.min.css.
EDIT :
Don't forget that you also need to add data-theme to your page DIV container:
<div data-role="page" id="home" data-theme="b">
or you can add it only to your header, content and footer DIV's but I would advise you to add it to page DIV.