.. highlight:: django

Theme: Mobile Templates
=======================

Tendenci detects mobile browsers and allows you to use that information within your templates. Tendenci will assign a cookie to these visitors. This cookie can be toggled using code below to allow visitors to switch between the mobile and standard versions of a theme.

Mobile Template Folder
-------------------------

A typical Tendenci theme includes a ``media`` and a ``templates`` folder. You can add a ``mobile`` folder at the root of the theme. If a device is detected to be mobile, Tendenci will first look for the relevant template file in the ``mobile`` folder, then it will move on to the ``templates`` folder, then to the core software. This allows you to build a mobile template and customize other templates specifically for mobile devices.

A very basic theme with mobile and standard layouts could look like this:

- media

  - css
  - js
  - img

- mobile

  - default.html
  - homepage.html

- templates

  - default.html
  - homepage.html
  - footer.html

Mobile Toggling
------------------

When setting up your mobile layout, you can select to show the mobile content using the code below (a mobile stylesheet is included in the example)
::

   {% if request.mobile %}
      <link rel="stylesheet" href="{% static 'css/styles-mobile.css' %}" type="text/css" />
   {% endif %}

That same code can be used to include a separate layout, separate navigation, or anything else that you may want to display to mobile viewers but not to desktop browsers. It is **not** necessary to use these ``if`` tags in templates in the ``mobile`` folder.

To take advantage of the cookie opt-out for mobile viewers who want to view the full site, first load the mobile tags at the top of the template:
::

   {% load mobile_tags %}

To show the link to mobile theme viewers to view full site
::

   {% if request.mobile %}
      {% toggle_mobile_link request.get_full_path "View full site" %}
   {% endif %}

To show the view mobile site link to mobile browser viewers who previously opted out
::

   {% if request.mobile_browser and not request.mobile %}
      {% toggle_mobile_link request.get_full_path "View mobile site" %}
   {% endif %}

The placement of these links, as well as the text of the link is customizable.

Mobile Browsers Supported
-------------------------

The following mobile browsers are supported:

- iPhone
- iPod
- Android
- Opera Mini
- Blackberry
- Droid
- IEMobile
- EudoraWeb
- Fennec
- Minimo
- NetFront
- Polaris
- HTC_Dream
- HTC Hero
- HTC-ST7377
- Kindle
- LG-LX550
- LX265
- Nokia
- Palm
- MOT-V9mm
- SEC-SGHE900
- SAMSUNG-SGH-A867
- SymbianOS
- DoCoMo
- ZuneHD
- ReqwirelessWeb
- SEJ001
- SonyEricsson