Modifying Sandvox Designs

Where to Start

   Do you have any custom Designs that are closer to the look of the site you want to build than a stock Sandvox Design? I modified the Clean Sheets Design to create the Original Green design, then modified the Original Green Design to create subsequent sites. If you're modifying a Sandvox Design, the navigate to Applications>Sandvox. If you're modifying a Design you've already customized, skip forward to Modifying the Design.

   1. Right-click or Control-click on the Sandvox icon, which will bring up a list of choices. Select Show Package Contents.

   2. Navigate to Contents>Designs

   3. Select the .svxDesign file for the design you've chosen (file names are fairly self-explanatory) and duplicate it.

   4. Move the duplicated file to username>Library>Application Support>Sandvox.

Modifying the Design

   Select either the Sandvox Design you've just moved or a custom Design already in this folder and rename it for the new Design you're creating. For my New Media for Designers + Builders site I'm working on, I renamed the file NewMedia.svxDesign. Now, you're ready to modify the Design.

   1. Right-click or Control-click on the .svxDesign file, which will bring up a list of choices. Select Show Package Contents.

   2. The file you're looking for is Info.plist, but don't just double-click it. If you do, it'll open it up in Property List Editor, where (for reasons I can't fathom) it's almost impossible to save correctly. I've worked with this for many hours on my first two sites, finally stumbling on the right combination of keystrokes and mouse clicks completely by accident, and unable to remember precisely what I did. So don't do that. Instead, do this:

   3. Open Info.plist with TextEdit.

   4. Change the Bundle identifier to "Sandvox.<newthemename>" (don't include < or >... I'm just using those to make clear that "newthemename" is a variable... the name of your new theme (remove all spaces and other extraneous characters.)

   5. Change the title to <newthemename>.

   6. Save and close.

   7. Modify your Design by changing main.css. I've had great luck with CSSedit, but that app has been bundled into Espresso, which I haven't worked with yet. In any case, it's the main.css file that determines the look and feel of your custom Design.

© 2012 The Guild Foundation Press