A Pinax theme based on jQuery Mobile ========================================== Quick Start ----------- Include "pinax-theme-jquerymobile" in your requirements file and "pinax_theme_jquerymobile" in your INSTALLED APPS. Make sure both template loaders and staticfiles finders includes app directories. Site name comes from Sites fixture. Your "site_base.html" should extend "theme_base.html" nav & subnav blocks ------------------- "nav" and "subnav" blocks content should be something like: <li><a data-role="button" data-icon="home" href="{% url home %}">{% trans "Home" %}</a></li> "nav" block appears in header and "subnav" block in footer Your pages should have blocks "head_title", "body_title"(with same content as "head_title") and "body" and should extend "site_base.html". for each installed app, in app templates in base.html or appname_base.html, you should have: {% block body_title_base %}{% trans "Appname" %} : {% endif %}{% block body_title %}{% endblock %}{% endblock %} somwhere before "body" block The url name "home" should be defined as the homepage. by default theme using jquery CDN with latest jquery, jquerymobile.min.js, jquerymobile.min.css Forms ----- To style forms, do something like: <form method="POST" action="">{% csrf_token %} <li data-role="list-divider">{% trans "Your Form Name" %}</li> <ul data-role="listview" data-inset="true"> {{ form.as_ul }} <li><button data-icon="arrow-u" type="submit">{% trans "Submit Form" %}</button></li> </ul> </form> Todo / Issues ------------- * build additional templates for other Pinax-related apps * add settings option to switch jQuery Mobile themes (A,B,C,D,E) in settings * add settings option to load jQuery Mobile static files from CDN or use local files. Resources --------- * Pinax: http://pinaxproject.com/ * jQuery Mobile docs and demos: http://jquerymobile.com/ * Pinax themes grid at djangopackages: http://djangopackages.com/grids/g/pinax-themes/