Page 1 of 5 123 ... LastLast
Results 1 to 10 of 50
  1. #1
    Join Date
    Oct 2005
    Location
    Chicago, IL USA
    Posts
    1,549
    Plugin Contributions
    28

    Default Mobile template CSS

    I tried searching but came up with very little. I'd like to offer a mobile version of our website. I was hoping to find a template and return the regular template or this new mobile template based upon the visitors browser. Anybody tackle this yet?

  2. #2
    Join Date
    Oct 2005
    Location
    Chicago, IL USA
    Posts
    1,549
    Plugin Contributions
    28

    Default Re: Mobile template

    Bump. No one has set up a Zen Cart site to be viewed from a mobile phone or other device?

  3. #3
    Join Date
    Dec 2006
    Posts
    199
    Plugin Contributions
    0

    Default Re: Mobile template

    I agree that this should be addressed. I don't believe that any of my competition has a special mobile presence yet and I'd like to be ahead of the pack. I used to be on top of new tech but am just getting started with mobile. I haven't even seen my site on a mobile device yet. I am willing to help support development.

  4. #4
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Mobile template

    Quote Originally Posted by jeking View Post
    I tried searching but came up with very little. I'd like to offer a mobile version of our website. I was hoping to find a template and return the regular template or this new mobile template based upon the visitors browser. Anybody tackle this yet?
    Quote Originally Posted by brushwoodnursery View Post
    I agree that this should be addressed. I don't believe that any of my competition has a special mobile presence yet and I'd like to be ahead of the pack. I used to be on top of new tech but am just getting started with mobile. I haven't even seen my site on a mobile device yet. I am willing to help support development.
    All it really takes is a "handheld/mobile" CSS stylesheet.

    take a look at here for a how to.

  5. #5
    Join Date
    Dec 2006
    Posts
    199
    Plugin Contributions
    0

    Default Re: Mobile template

    If that's the case, would it need to be specific to each template or could a general one be used for most zen installations? I'd prefer to preserve some of the feel of my store but don't want browser/device incompatibility either.

  6. #6
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Mobile template

    Quote Originally Posted by brushwoodnursery View Post
    If that's the case, would it need to be specific to each template or could a general one be used for most zen installations? I'd prefer to preserve some of the feel of my store but don't want browser/device incompatibility either.
    This is fairly generic:

    /**
    * CSS Stylesheet for handheld devices
    *
    * @package templateSystem
    * @copyright Copyright 2003-2005 Zen Cart Development Team
    * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
    */

    @media handheld {

    html, body {font: 12px/15px sans-serif;
    background: #fff;
    padding: 3px;
    color: #000;
    margin: 0;}
    a:link, li a:link, a:visited, li a:visited {
    background:none;
    text-decoration: underline;
    color: #0000CC;
    }
    a:hover, li a:hover, a:active, li a:active {
    background:none;
    text-decoration: underline;
    color: #660066;
    }
    h1, h2, h3, h4, h5, h6 {font-weight: normal;}

    #mainWrapper {margin:0;background:none;max-width: 480px;}
    #headerWrapper {background-color: #ffffff;border:none;height:200px;}
    .customerService{display:none;}
    .freeShipping{display:none;}
    #credentials{display:none;}
    .date{display:none;}
    #dropMenuWrapper{display:none;}
    #navMainWrapper{border:none;}
    #navMain {
    float: none;
    font-size: 1.1em;
    line-height: normal;
    }
    #navMain ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    #navMain li {
    display:block;
    margin:0;
    padding:0;
    }
    #navMain a, #navMain a span, #navMain .current a, #navMain .current a span {display:block;float:none;text-decoration: underline;color: #0000CC;background-image:none;text-align:left;}
    #navMain a:hover, #navMain a:hover span {color:#ff0000;background-image:none;}
    #navMain .contact, #navMain .account, #navMain .cart {display:none;}
    #contentMainWrapper, #contentColumnMain {background-color: #ffffff;width:480px;float:none;}
    .centerColumn {margin: 0;padding: 0;}
    #footer{border:none;text-align:center;}
    #siteinfoLegal {display: none;text-align:left;}
    .messageStackWarning, #navMainSearch, #navCatTabsWrapper, #navEZPagesTop,
    #navColumnOne, #navColumnTwo, #taglineWrapper, .navMainSearch, #navSuppWrapper, .banners, #navBreadCrumb { display: none;}

    }

    /* iPhone-specific styles */
    @media only screen and (max-device-width: 480px) {
    html {-webkit-text-size-adjust: none;}

    }

  7. #7
    Join Date
    Oct 2005
    Location
    Chicago, IL USA
    Posts
    1,549
    Plugin Contributions
    28

    Default Re: Mobile template

    Super. Now how does one set-up a check for the browser or agent to switch the stylesheet for a handheld browser?

  8. #8
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Mobile template

    Quote Originally Posted by jeking View Post
    Super. Now how does one set-up a check for the browser or agent to switch the stylesheet for a handheld browser?
    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";
    }

  9. #9
    Join Date
    Oct 2006
    Location
    Alberta, Canada
    Posts
    4,571
    Plugin Contributions
    1

    Default Re: Mobile template

    Quote Originally Posted by clydejones View Post
    All it really takes is a "handheld/mobile" CSS stylesheet.

    take a look at here for a how to.
    Are you sure about that?

    Other considerations are:
    - image resizing
    - MIME type

    I don't have / use a Cell Phone and so I use online Emulators for testing Mobile site coding. The 'perishablepress' link you provided failed miserably. Anyone actually checked the site with their Cell Phone? Be interested in seeing how it showed. (hint - screenshot would be nice )

  10. #10
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Mobile template

    You can check the general look by viewing in Opera.

    open the a site in the opera browser click view and then "small screen"

 

 
Page 1 of 5 123 ... LastLast

Similar Threads

  1. v139h I bought a mobile template; how do I Mobile Device to Show Desktop version by Default
    By explorer1979 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 2 Mar 2013, 03:42 PM
  2. v139d Mobile Template?
    By ha75 in forum Addon Templates
    Replies: 0
    Last Post: 4 Oct 2012, 09:11 AM
  3. My mobile template
    By luisitolozano in forum Addon Templates
    Replies: 11
    Last Post: 20 Sep 2012, 05:00 PM
  4. mobile template
    By juneloweelyn in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 12 Sep 2012, 03:33 PM
  5. Mobile CSS Template for Admin?
    By dgent in forum Addon Templates
    Replies: 0
    Last Post: 8 Nov 2011, 04:50 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR