Mobile template CSS

**gjh42** · 25 Jan 2011, 10:45 PM

Good philosophical (and technical) information on "responsive design" which is relevant to deciding how to address mobile devices:
http://www.alistapart.com/articles/r...ve-web-design/
Also a recent Sitepoint article:
http://blogs.sitepoint.com/2011/01/1...s-framework-3/

**Calljj** · 31 Jan 2011, 01:12 PM

Quick question for Vittorio.

thanks for the mod, works perfectly for me.

If using the overides, can you provide a solution that allows the customer to view the "usual" version of the site if they choose too?

I was thinking about adding a link in the footer where the mobile user can click to view the full version of the site, thinking of using session variables in order to do this, but running out of skill level rapidly!

**torvista** · 31 Jan 2011, 09:37 PM

This is a useful tool to test functionality of the Opera Mobile browser on a pc/mac, to make code changes that display in real time using this emulator in conjunction with Opera Dragonfly:
http://www.opera.com/developer/tools/

**Calljj** · 4 Feb 2011, 03:14 PM

To answer my own question, if using the browscap method as Vittorio posted and you want iphone customers to see the full site, then this is how i did it.

1. Create a new file called redirect.php and place it in the public_html folder

2. put the following code in it -changing the domain name to you own

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<?php
$value = 'full';
setcookie("TestCookie", $value);
setcookie("TestCookie", $value, time()+1800); /* expire in 1/2 hour */ 
?>
<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/">
</head>
</html>

3. On your site, put a link to the redirect.php file for users to click on to see the full site

4. Alter the code slightly that vittorio posted to look like this

Code:

* Determine if client is a mobile device or not ($mobile = 1 ==> it is | $mobile = 0 ==> it is not)
*/
$browser = get_browser($_SERVER['HTTP_USER_AGENT'], true);
$mobile = ($browser['ismobiledevice'] == null ? 0 : $browser['ismobiledevice']);
$platform = strtolower($browser['browser']);

/**
* Check if user wants full version or not use it
*/

 $is_mobile = "true";

if(isset($_COOKIE['TestCookie'])){
 $is_mobile = "false";
}


/**
* Check if there is a specific template for this mobile platform and use it
*/
if ($mobile == 1){
if ($is_mobile == "true"){
  $exists_mobile = file_exists(DIR_WS_TEMPLATES . $template_dir . '_mobile');
  $exists_platform = file_exists(DIR_WS_TEMPLATES . $template_dir . '_mobile_' . $platform);
  if ($exists_platform) {
    $template_dir .= '_mobile_' . $platform;
  } else {
    if ($exists_mobile) {
      $template_dir .= '_mobile';
    }
  }
}
}

/**
* EOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT

Hope this helps someone out with creating mobile based zen cart templates for iphones etc

**kburner** · 25 Feb 2011, 05:58 PM

I noticed when looking through my site's awstats that there are blackberry and android users. My husband has an android and my site shows with just a little corner snippet. I am very interested in this process.

From the postings I am gathering that you...

1st. create a new stylesheet post #6
2nd override init_templates.php with coding given in post #19 from includes/init_includes/overrides, restart Apache, load browscap.ini, not sure what to do after that.....

This should allow customers with handheld internet devices to view my site and login and purchase.

Has anyone completed the steps with it working? and have orders come through?

Thanks, Kim

**delia** · 17 Mar 2011, 01:44 PM

Good information, thanks everyone.

I'm presently in the planning stages for a default mobile template for Zen Cart and I see the checkout as a bottleneck. I tried Numinix's Ajax checkout but I couldn't even login to checkout on my iPhone.

I'm thinking a jQuery checkout would be better.

Any thoughts on this.

**misty** · 23 Apr 2011, 08:30 AM

You can check the general look by viewing in Opera.
open the a site in the opera browser click view and then "small screen"

Latest Opera no longer has this option...instead use following method:-
Opera 11 for Windows: View -> Developer Tools -> Page Information -> View button -> Small Screen.

**xcergy** · 12 May 2011, 06:53 PM

Originally Posted by clydejones

first name the css file "handheld_stylesheet.css and upload it to:

includes/templates/YOUR_TEMPLATE/css

next

open includes/templates/YOUR_TEMPLATE/common/html_header.php

find the following section of code:

/**
* load printer-friendly stylesheets -- named like "print*.css", alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');
sort($directory_array);
while(list ($key, $value) = each($directory_array)) {
echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
}

immediately after add the following:

/**
* load handheld-friendly stylesheets -- named like "handheld*.css", alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^handheld/', '.css');
sort($directory_array);
while(list ($key, $value) = each($directory_array)) {
echo '<link rel="stylesheet" type="text/css" media="handheld" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
}

OK, so I took post #6 and named it handheld_mobile.css
THEN followed the directions in this post.

No change in the size or format on my Verizon Android Vortex smart phone.

I'm sure I missed something.... any clues?
http://www.thedumbdog.com (freeyellow.com is the host)
TIA
Keith

**gjh42** · 12 May 2011, 07:09 PM

View source shows
<link rel="stylesheet" type="text/css" media="handheld" href="includes/templates/dd/css/handheld_stylesheet.css" />
which indicates that there is a file named handheld_stylesheet.css. Does it exist? Does it have any content? Does handheld_mobile.css exist on your server?

**xcergy** · 12 May 2011, 07:29 PM

Originally Posted by gjh42

View source shows
<link rel="stylesheet" type="text/css" media="handheld" href="includes/templates/dd/css/handheld_stylesheet.css" />
which indicates that there is a file named handheld_stylesheet.css. Does it exist? Does it have any content? Does handheld_mobile.css exist on your server?

I have it in the dir includes/templates/CUSTOM_TEMPLATE/css

My bad. I do not have a handheld_mobile.css file I can find that where? Sorry, I'm not up to speed on css technology.

Thread: Mobile template CSS

Thread Tools

Search Thread

Display

Re: Mobile template

Re: Mobile template

Mobile template testing tool

Re: Mobile template

Re: Mobile template

Re: Mobile template

Re: Mobile template

Re: Mobile template

Re: Mobile template

Re: Mobile template

Similar Threads

v139h I bought a mobile template; how do I Mobile Device to Show Desktop version by Default

v139d Mobile Template?

My mobile template

mobile template

Mobile CSS Template for Admin?

Bookmarks

Bookmarks

Posting Permissions