The Browser Theme Settings module provides additional browser based template suggestions. For pages, nodes, blocks, CSS and JavaScript. Useful for certain browsers (IE) that have poor coding standards or for mobile devices (like an iPhone) that require complete restructuring of page layout for optimal viewing. This page demonstrates how to make use of the module.

Visit the module page for more information about the module.

Example of block, node and page template suggestions:

  • ie-6-page.tpl.php
  • iphone-page.tpl.php
  • safari-4-block.tpl.php
  • firefox-3-6-node.tpl.php

Example of CSS and JavaScript suggestions. If default.js and default.css are the base files, Browser Theme Settings would look for the following file suggestions first:

  • firefox-3-default.js
  • firefox-3-5-default.css
  • iphone-default.js
  • iphone-default.css

Required Modules

  • Browscap - required for capturing browser data
  • jQuery Update (6.x-2.0-alpha1) - requires jQuery 1.3 Framework

Module Support

  • Domain Access - provides domain specific browser theme settings

Installation

  • Unpack your download of browser_theme and place the folder into: sites/all/modules.
  • Navigate to your site's Modules page (/admin/build/modules) and enable Browser Theme Settings located in the Other category.
  • Open your theme's .info file and copy, write down or remember what CSS and JS files are listed. Remove them from your theme's .info file and save.
  • Navigate to your theme's settings page (/admin/build/themes/settings/YOUR_THEME), place the theme's CSS and JS files into Browser Theme Settings and click Save Configuration at the bottom.
  • Navigate to your site's Performance page (/admin/settings/performance) and Clear cached data at the bottom.

Page Caching

If you have this setting enabled (/admin/settings/performance - on normal, not aggressive!), you will notice a small problem: Page Caching serves you the wrong page template! "Wait a minute!," you say, "I created separate page templates!"

Unfortunately, Drupal uses the page url for the cache ID (CID). This is not very useful if there are multiple browsers visiting the same page. As a result, the first browser that requests the URL essentially caches that page with its own template, and the rest of the browsers are stuck with the wrong template. Frustrating, I know!

Alas, I have created a solution! Granted, this will not work for those who have already set a custom cache include in their settings.php file. That being said, if anyone has any suggestions or would like to help create hooks for caching... please let me know!

Open your settings.php file for your site and add this towards the end of the file (For those who have Domain Access installed, place this before it):

$conf['cache_inc'] = './sites/all/modules/browser_theme/cache.inc';

What this does: Simply put, this cache include file replaces Drupal's cache_get and cache_set functions. It detects what browser you are using (Browscap must be installed and enabled!) and prepends the cache ID (CID): browser-major-minor-CID.

Additional Notes

  • This module is currently stable. It can be used for a production server, however please keep in mind the above page caching issue. If no browser-specific files are created, this module will not impact your site. This module does not override previously suggested page or node templates. As always, please use a test server if you are unsure how it will affect your site!