Mobile Theme Switcher
Categories
Component ID
Component name
Component type
Maintenance status
Development status
Component security advisory coverage
Component created
Component changed
Component body
Switches themes based on rule sets that match the browser's agent. Using the interface provided you can specify keywords (including regular expressions), the theme to be used and an aditional css file.
Mobile Theme Switcher uses session cookies to store the users's browser information. It is also compatible with Varnish and can work even without sessions.
Features:
- Overview panel with a list of all rules
- Device Id field: When the rule is active, this field can be accesible via PHP call to mobile_theme_switcher_get_device_id(). This can be very useful when modules or views/blocks need to know what type of device is browsing the page. i.e. iPhone
- Use of keywords to match the browser's agent information with support to regular expressions
- Ability to map the rule with a mobile theme
- Ability to specify an extra css file. Useful when you have a main theme with multiple css for individual devices, i.e. iphone.css, android.css, etc
- Ability to specify a custom front page for each rule. i.e. /m or /mobi, etc
- Ability to switch between themes by appending the device type to the URL. i.e. http://www.example.com/?device=mobile
- The URL's /m and /mobi are provided and can be used to be pointed as front page or to display blocks for these urls only
- Configurable switch blocks with links to switch between the Mobile site, the Desktop site or an External site. They appear in the blocks page and can be configured as usual
- Ability to enable automatic switch to the theme as opposed as having to click on the links above. The links above can still be displayed even when this option is enabled
- Built in Mobile detection with support to other detection modules such as Browscap and Wurlf. Mobile detection is different than Agent detection. The first one is used for example to decide weather of not to display the blocks with the switch links, while the second one is responsible for the mapping of the rule vs theme.
- Ability to redirect unrecognized devices to a different URL
- Ability to enable Watchdog/Syslog Debugging
- Report with the list of unrecognized agents. Useful to have some direction on how to add new rules
Installation:
- Place this module directory in your modules folder (this will usually be "sites/all/modules/").
- Go to "administer -> build -> modules" and enable the module.
- Go to Administer -> People -> configure Mobile Theme Switcher
Configuration:
Go to "Administer -> Configuration -> Mobile Theme Switcher"
In the Add New Rule tab you can add a new rule
Provide the rule name. i.e. iPhone
Provide the Device Id. i.e. smartphone
Provide keywords. i.e. iphone
Select the theme. i.e. Zen
Select an aditional stylesheet. i.e. iphone.css
Set the custom front page. i.e. mobi (the leading slash is not needed)
Save
Testing
Browse your website with your mobile device.
Alternatively you can use the User Agent Switcher for Firefox to simulate a mobile device. This is very useful when developing your theme. You can download it from here https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
In the docs folder you can find useragentswitcher.xml which you can import into firefox.
Tip: The Mobile Theme Switcher remembers the user agent, this is done via session cookie. In order to switch between themes when using the User Agent Switcher for Firefox, you need to clear the cookies of your browser: http://support.mozilla.org/en-US/kb/Deleting%20cookies
