Quickly modifying existing designs
If you want to just tweak an existing design, as long as you are not changing the dimensions of any images, you can do this without too much knowledge of CSS. (If you do have CSS knowledge and you want to dig deeper, see our Sandvox Designers Guide.)
To accomplish this, you have two options. One is very quick; the other takes a bit of time.
CSS Code Injection
If you have Sandvox Pro you can use Code Injection to insert additional code into the header area of a page.
You can add in your own custom CSS code in a <style type="text/css"> ... </style> area, and insert it into the <head> area. You will likely need to refer to the CSS in the design you are overriding.
This would make all "#main h2" (page title) text green:
<style type="text/css">
#main h2 { color:green; }
</style>
Note that this override will add a bit of extra size to each page, so if your changes are extensive, you may wish to instead use the second technique to make your own new design, based on an existing one.
Making a New Design
You can make a copy of an existing design, giving it a new name (and identifier), and then apply your changes to that new design.
Some examples of modified Sandvox designs (not known to be publicly available):
- http://www.ebinternacional.org/en/ (new colors)
- http://www.midnightmagnolia.com/ (modified font in Quartz Composer title)
- http://www.kitasato-u.ac.jp/sci/resea/kagaku/yamamoto/mmej/index.html
- http://www.strawfootprint.org/
- http://www.i-open.org/
- http://www.cc.jyu.fi/~atsoukka/
- http://www.paintedphoto.com/
- First, dig into the Sandvox application by control-clicking on Sandvox in the Finder and choosing Show Package Contents. Look in Contents → Designs and find the design you want to change. Double-click on this file, which will cause Sandvox to copy it to home → Library → Application Support → Sandvox folder. (Quit Sandvox after it has copied it.) You will be editing this copied file.
- If you want to modify the existing design, so that it has the same name in Sandvox, you can skip the next step. However, this is not recommended. It's better to split off the existing design to give it a new name, so that there is no confusion between your design and the original Sandvox one.
- To rename your design:
- Change the file name to a new name.
- Then do another Show Package Contents to get into this design's bundle.
- Open the file Contents-> Info.plist with a text editor (if you are comfortable editing property lists) or Property List Editor.
- Change the value of the key "CFBundleIdentifier" to a new identifier. This can be anything you want that is distinct, but a convention is to use something like com.mycompanyname.MyNewDesign
- Change the value of the key "title" to the name that you want to see in Sandvox.
- Now you are ready to edit files. If you want to just replace images, dig around and find the image you want to replace, and replace it with another image with the same name and the same dimensions.
- You can also edit the main.css file for minor changes, such as to change font names. Be careful here!
- If you want your new design to have a different thumbnail in Sandvox, so it is more distinguishable, make a new image that is 100 pixels wide by 65 pixels tall, and replace the existing thumbnail.png.
If you want to distribute this changed design, please see the Credits.rtf file embedded within the design.
Warning
Do not replace files inside your Sandvox appliation package; they will be replaced if you update to a new version of Sandvox! Instead, place them in one of the following places:
- home → Library → Application Support → Sandvox
- home → Library → Application Support → Sandvox → Designs
- Library → Application Support → Sandvox
- Library → Application Support → Sandvox → Designs
Please remember, You will need to re-launch Sandvox to have it notice any changes to your installed designs.
Sharing your Design
If your modified design isn't something specific only to your needs, perhaps you could share your design in the spirit that Sandvox designs are shareable. Our design license is here.
