Zen theme is a powerful theme that is created to be a starting point for new web designers. Here we are basically going to cover on how to make your theme mobile.

Guidelines for making your theme mobile

  1. Download and install a version of Drupal (preferably the latest).
  2. Go to Site building and download theZen theme and unpack it in the directory - sites/all/themes.
  3. Save the theme and enable it.
  4. Install the mobile pluginmodule so that the theme can be made mobile
  5. Go to the device group and create three groups.
  6. Name the first group as Nokia low-end which basically covers low end Nokia devices.
  7. Name the second group as Nokia high-end which helps run devices like Symbian etc…
  8. Name the third group as Nokia high-end with touch which helps to rum devices like the iphone etc…
  9. Save all the three groups.
  10. Go to the detection and configure it as low end devices in order to ensure that the theme works for all mobile devices.
  11. For further configurations like changing colour, adding primary links, changing the logo etc… go to your Zen theme configuration menu.
  12. There you have it, a mobile version of your theme.
  13. Enjoy!!!

Here's the list of themes that support and use mobile links

  1. Framework
  2. yaSt - Yet another Social theme
  3. Sympal Theme
  4. Tarski
  5. iWebkit
  6. mpFREE
  7. Adaptive Theme
  8. Open Grid
  9. .mobi
  10. Pinstripes
  11. iUI
  12. mobile_garland
  13. Nokia Mobile Theme
  14. Adaptivetheme Mobile
  15. Japanese Mobile
  16. Fuse Mobile
  17. jQuery Mobile
  18. A-Cloudy-Day Mobile theme
  19. Mobile

Comments

vosechu’s picture

Questions:
Does this work for devices like the iPhone? Or only on nokia devices?
Can you link to the documentation for installing Zen
Can you also indicated where the device group should be added? Is this a content type or site setting?
What do you mean when you say 'Go to the detection"?
Can you link to some blog posts or articles that informed your advice about mobile themes?
What sorts of considerations does this process address? For instance:
Does this do css resizing?
Will it work on tablets?

rsriram95’s picture

I am not sure on how to edit the issue as I can't see any edit button. Should I create a new issue?
However, I do have a few answers for your questions.
it works for both iphone as well as nokia devices.
Go to the mobile plugin menu (this is a site setting), and press the device groups button. Then create the three groups.
CSS resizing isn't done. The CSS gets filtered. Only low scripts for low end , high for both high end and high end touch. The scripts are provided by the use of the mobile plugin.
"Go to the detection" means press the detection rules button that falls under the mobile plugin menu and change the configuration to low end devices.
As for tablets , I am sorry but I don't know. I presume that they might work , however with some possible application errors.
Rgds,
R.Sriram

vosechu’s picture

Thanks for the answers, I'm sorry that nobody else commented, it's a pretty major holiday this week in America. I'm going to mark the GCI task complete but leave this open for comments from the Zen team or other people.

rmjackson’s picture

Dear vosechu,

Does this work for devices like the iPhone? Or only on nokia devices?

Yes. This procedure works for the iPhone. When you install mobile tools, you'll see that there is a theme tab that allows you to choose a theme for many different mobile device.

Can you link to the documentation for installing Zen

http://drupal.org/node/226552

Can you also indicated where the device group should be added? Is this a content type or site setting?

What they mean here is to add a new group that is specific to the mobile display. You can view the details once you've installed the mobile tools module here: /admin/settings/mobile-tools/roles A great explanation of everything is here http://drupal.org/node/459686

What do you mean when you say 'Go to the detection"?

http://drupal.org/node/459686

Can you link to some blog posts or articles that informed your advice about mobile themes?

http://drupal.org/node/459686

What sorts of considerations does this process address? For instance:
Does this do css resizing?

Overall you can choose a different drupal theme for each mobile device you choose to define or are pre-defined. That's what this process will accomplish for you.

Will it work on tablets?

Yes. Tablets will work too. Just see here: http://drupal.org/node/767796

Have a nice day,

pearfresh’s picture

echoz’s picture

Status: Needs review » Fixed

This is an old post, Mobile Plugin is no longer in development, and my understanding is the direction of Zen will be responsive design rather than device detection.

Status: Fixed » Closed (fixed)
Issue tags: -Google task

Automatically closed -- issue fixed for 2 weeks with no activity.