Setting Up Custom Mobile Sites

Here is how to set up custom mobile sites. This is just a basic step by step. For specifics as Shmal.

  1. Set Up the Layout
    The layout should not be image heavy. Ideally, it just has container div's with module zones in them as necessary. The different container elements have different ID's on them for background purposes, so each zone doesn't need it's own container. See SJO.org or socalneurospine.com for good examples.
    Each container's ID should have two parts to the name, type of stuff going in it, and the word Area. So HeaderArea, ContentArea, FooterArea etc.
    Each zone should also have two parts to the name, type of modules going in it, and the word Zone. So HeaderZone, NavZone, ButtonsZone etc.
  2. Set your Backgrounds
    Save your layout now and when you first enter the template mode, set your backgrounds in the CSS editor. Refresh as you do to see them showing up. Use the ID's on your container elements for these, not the ID's of your zones.