Mura CMS

• Documentation
•  » Developer Guides
•  » Front End Development
•  » Mobile Devices

Mobile Devices

Mura CMS supports content delivery and rendering specifically for mobile devices out of the box beginning with version 5.4.

How It Works

When a user visits a Mura CMS site on a mobile device, Mura will automatically detect the device, set a cookie in the browser (mobileFormat) and serve all site content through the "mobile.cfm" template. By default, this mobile.cfm template uses jQuery Mobile to render and style the content. However, using jQuery Mobile is not required. You can just as easily delete the references to the jQuery Mobile files and do whatever you like.

You can toggle between normal rendering and mobile rendering using the Full Site/Mobile site links found in page footer. In each mode, you will only presented with a link to the other mode.  The syntax for the link is simply ./?mobileFormat=true or ./?mobileFormat=false.

Files

The following files are used for mobile rendering in Mura CMS:

• All files found in /{siteid}/includes/mobile/ (*Note: only the .min files are used. The others are provided for convenience)
• {siteid}/includes/themes/merced/templates/mobile.cfm

Mobile-Specific Rendering Methods

In addition to specific files used for mobile rendering, default output of Local Indexes (class="svIndex") has been changed from Definition Lists to Unordered Lists specifically for consistency with jQuery Mobile. More about dynamic list output can be found in our here.

Adding Mobile Support to an Existing Site when upgrading to Mura 5.4

To enable mobile support for an existing, upgraded instance of Mura (by updating the core), you'll still need to update each site you'd like to enable mobile support on.  This will add the necessary Javascript and CSS files for mobile support via jQuery Mobile. If you'd prefer not to upgrade an individual site you can download the entire mobile directory and place it at the root of your specific site (site ID) directory.

In addition, you also need to download the mobile.cfm template and put it in your theme "templates" directory. Themes do not get updated when performing a core or site update.