Designing a Custom Theme
To see a full example of a custom DrupalGap theme, check out the drupalgap_demo application.
Design the Theme
Use jQuery Mobile's Theme Roller to design a custom theme.
Download the Theme
After designing the theme, click the "Download theme zip file" button, enter the machine name of your theme:
Then click the "Download Zip" button.
Extract the Theme's Files
After downloading the zip file from jQM, extract the images directory and these three files so they all live within the app here:
app/themes/my_theme/images/* app/themes/my_theme/jquery.mobile.icons.min.css app/themes/my_theme/my_theme.css app/themes/my_theme/my_theme.min.css
These files will exist alongside the my_theme.js and page.tpl.html file for the custom theme.
Add the CSS Files to index.html
Now we need to tell DrupalGap about the new assets for our custom theme. This is done by making some small modifications to our app's index.html file.
Remove this line from index.html:
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
Then replace it with these three lines, for example:
<link rel="stylesheet" href="app/themes/my_theme/my_theme.css" /> <link rel="stylesheet" href="app/themes/my_theme/jquery.mobile.icons.min.css" /> <link rel="stylesheet" href="jquery.mobile.structure-1.4.5.min.css" />
Specify the Theme in settings.js
If you haven't already done, specify the theme's machine name in the settings.js file:
// Theme drupalgap.settings.theme = 'my_theme';
How to use Different Theme Swatches
By default DrupalGap uses the "A" swatch of the jQM theme rolled design. In order to use the other swatches, just add for example, a data-theme="b" attribute to html elements within the app.