Build iPhone Compatible Drupal Websites Using iWebkit: Part 3 - final release of iWebkit theme

Sumit Kataria
Sumit Kataria

on

November 2, 2009

Build iPhone Compatible Drupal Websites Using iWebkit: Part 3 - final release of iWebkit theme

Finally iWebkit theme for drupal-iPhone websites is production ready. Theme now includes Drupal form theming and 12 different subthemes to suit your color preferences.
From Now on this theme will be maintained on drupal.org as iWebkit project.
Features added since last release are:

  1. Form elements are now themed. All form elements now looks like default iphone forms. This means there is no need to add custom user-login, comments or node add forms for your iphone website, you can directly use drupal default forms and they will be automatically converted into iPhone style form elements.
    • Select list and Checkboxes look like- form-element-1
    • Radio buttons and Text-area look like- form-element-2
  2. The code behind this magic is included in template.php where individual field's theme function is overridden as
    <?php
    function iwebkit_button($element) {
     
    // Make sure not to overwrite classes.
     
    if (isset($element['#attributes']['class'])) {
       
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
      }
      else {
       
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
      }

      return
    '<ul class="pageitem"><li class="form menu"><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'] .'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></li></ul>\n";
    }
    ?>
  3. 12 different subthemes + 1 default theme are now included in iWebkit project. To give you more control the theme settings (at 'admin/build/themes/settings/iwebkit') provide a UI to switch between different subthemes. Each subtheme consists of its own style.css along with custom colored image files.
    iphone-blog-themes UI to switch subthemes Themes | Drupal iPhone Site
Visit the demo website for the iWebkit theme. Please open above link from your iPhone otherwise you will see a drupal site in garland theme ;-). Note: Please change extension of downloaded theme file to .zip and extract it in sites/all/themes folder of your drupal install.
Other posts in this series of iPhone-drupal blogs:
  1. Build iPhone Compatible Drupal Websites Using iWebkit: Part 1
  2. Build iPhone Compatible Drupal Websites Using iWebkit: Part 2
  3. iDrupal: Manage Your Drupal Website From iPhone
AttachmentSize
iwebkit.zip_.txt1008.36 KB

Share it!

You have made a demo website,

but do you have a download link for that website.

It would be nice to have a website with a usersystem

 

dreceon

 

diederik.1@live.nl

please help

Great work, guys! Can't wait to play around with it.