Theme

Theme

Themes manage all the style and the structure of your mobile app.

Themes own four folders:

• header : all the js and third part that you want to import in your mobile app
• layout-templates : The templates of your layouts
• res : icones and screen splash for your app
• style : Own CSS files and resources
  All your themes have to follow this folder pattern

header

Header folder contains:

• A "js" folder where you can put css and js files. All the folder will be copy in the mobile app
• the file header.html witch defined how to import the js folder un an html layout
  Exemple of header.html:

<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Meie+Script' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="theme/main.css" />
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

layout-templates

In layout-templates folder, you can create custom templates for your layouts.
All the template's name have to finish by "-template.html"
In those templates, you simply write HTML contents.
To define "zone" (place where you can add gadget), you just have to add html class zone to a DIV
for exemple:

<div data-role="content">
<div id="zone-corps" class="zone">
</div>
</div>

The gadget style is independant from template

res

res define all the icon app and screensplash for android and ios.
To update them, you can modify the /web/pockeit/templates/main-header/config.xml (cf https://build.phonegap.com/docs/config-xml) or just update existing pictures (keep the exact same dimensions).

style

All the style folder will be copy in your mobile app.
The main.css is your entry point. You can import more css files using

@import url("style.css");
You can add image in the style subfolder of your choice and use them in your CSS like thant
background-image:url(img/logo.png);