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
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: (Contact the site owners if you would like to use their modified designs.)
- http://www.midnightmagnolia.com/ (modified font in Quartz Composer title, from Urban Forest)
- http://www.kitasato-u.ac.jp/sci/resea/kagaku/yamamoto/mmej/index.html (Re-colored This Modern Life)
Getting Started
- 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. Hold down the option key and drag (to make a copy) into 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 or thumbnail.tiff file.
If you want to distribute this changed design, please see the Credits.rtf file embedded within the design.
Warnings
Do not replace files inside your Sandvox application package; they will be replaced if you update to a new version of Sandvox! Instead, place them in one of the following places:
- If you are running the direct version of Sandvox (purchased and downloaded directly from Karelia):
- home → Library → Application Support → Sandvox
- home → Library → Application Support → Sandvox → Designs
- Library → Application Support → Sandvox
- Library → Application Support → Sandvox → Designs
- If you are running the App Store version of Sandvox:
- home → Library → Containers → com.karelia.Sandvox → Data → Application Support → Sandvox
Please remember, you will need to re-launch Sandvox to have it notice any changes to your installed designs.
Also, Be sure to give your new design a unique identifier. If you do not, then Sandvox will just consider it to be the same as the existing design that you copied. It might not be a problem, but if and when there is a new version of the original Sandvox design, your modified version will not be noticed by Sandvox because the built-in Sandvox version will have a higher version number.
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.
Upgrading Your Design
If you had customized your design for an earlier version of Sandvox, and with an update to Sandvox your design doesn't work right, it may be due to some changes we have made in our built-in designs. If this happens, you will probably want to re-apply your changes but start with the current version of the design.
- Make a copy of your customized design, so you can always start over if you mess up!
- Get a program like Apple's File Merge or Connected Flow's Changes or DayTime Software's Differencia. A program like this that makes it easy to spot difference between files is very helpful.
- Determine the differences between your customized design and the standard built-in design that you started with.
- Apply those changes to the latest version of the base design.
Keywords: quick, quickly, modify, modifying, modified, change, changing, custom, customize, customizing, customized, theme, themes, design, designs, color, colors, colour, colours, layout, edit, edits, editing, css, injection
