This is a short tutorial how to mobilize your Plone web site using Web and Mobile CMS and apply some custom theming on it. Web and Mobile 1.0 has now been independently deployed by various organizations in Switzerland, Netherlands, USA and German.
If you get stuck in a point please ask questions on the gomobile-dev discussion forum.
Prerequisites
This tutorial is little rough on details, but links to authoritative sources for more in-depth information. I hope to further polish this tutorial based on the user comments.
Note: currently the installation process does not work from China, as the local access to code.google.com and appspot.com servers is limited.
Installation
Install Web and Mobile to your buildout.
Possibly fight with lxml to get it running.
Create a Plone site (if you don’t already have an existing site).
Then install following add-ons, in this order in the site control panel
- Go Mobile
- Go Mobile Default Theme
Now your website should have a basic mobile experience with a default Web and Mobile theme.
Test mobile site
You can visit the mobile version of your site by putting a m.localhost domain in your /etc/hosts file. You don’t need a mobile browser, as the mobile site is detected by a domain name by default. Your mobile site should be available from http://m.localhost:8080/Plone
If you access the website with a mobile browser you will be automatically redirected to a mobile site.
Creating a mobile theme
Install the ZopeSkel based mobile theme template to your buildout.cfg.
parts =
...
paster
[paster]
recipe = zc.recipe.egg
eggs =
PasteScript
gomobile.templates
${instance:eggs}
Rerun buildout to enable bin/paster command:
bin/buildout
Create a theme skeleton using paster. We use a Python package named gomobiletheme.yourcompanyname here as an example name for the theme package. If it asks for “override files” answer yes:
cd src
../bin/paster create -t gomobile_theme gomobiletheme.yourcompanyname
List your new theme egg in buildout in develop-eggs. (Alternatively: use mr.developer if you indent to put it directly under version control.)
eggs =
gomobiletheme.yourcompany
develop =
src/gomobiletheme.yourcompan
Rerun buildout.
Test theme skeleton
Test the theme installs and works. Restart Plone and install your theme add-on in the add-on installer.
Navigate to m.localhost again and see that the mobile site still opens.
Theme theory
The generated mobile theme includes five.grok based viewlets.py and view.py files where you are to place
- Mobile theme viewlets (note: mobile theme does not use viewlet managers)
- Mobile specific view overrides
- Mobile specific page template overrides
All visual code registered against gomobiletheme.yourcompany.interfaces.IThemeLayer is available and used when your site is browser in mobile mode.
Changing logo
Change the generated gomobile.yourcompany.viewlets.Logo class. In the example below we set it to use logo image file from our web theme.
class Logo(base.Logo):
# Change logo URI here
def getLogoPath(self):
return "++resource++plonetheme.yourwebtheme.images/logo.png"
If you are using logo from the web theme resource directory, make sure <resourceDirectory> in theme browser/configure.zcml does not have <resourceDirectory layer=”"> set. If it’s set the resource directory is not activate for the mobile theme and the mobile theme cannot access the logo file.
The logo image is resized automatically by gomobiletheme.basic.viewlets.Logo base class for different mobile screen resolutions.
Changing footer text
In viewlets.py add:
class FooterText(base.FooterText):
""" Free-form HTML text at the end of the page """
# the presence of this viewlet includes a new page template
# and overrides default footertext
Then include the page template itself. Add new file to the your theme package templates/footertext.pt:
<div id="footer-text" i18n:domain="isleofback.app">
Your text goes here.
</div>
Change the default colours and CSS
Mobile theme static CSS and Javascript resources are provided by five.grok static folder mechanism. Transformations document provides some in-sight for different CSS files used by different handsets: common.css is served to all mobile phones, highend.css for Webkit and Firefox based browsers, lowend.css for limited browsers.
The default gomobiletheme.basic CSS resources are included by default with the theme skeleton. You need override only the CSS rules you specifically want to change for your own theme. This can be done by adding rules to common.css, lowend.css and highend.css files which you can find from the generated theme package.
Further info
Get developers 
Subscribe mFabrik blog in a reader 
Follow me on Twitter
