Creating a new project or file using a theme is a quick way to jump into coding something new. They can save you time by starting you out with a professional design and website structure, or simply by generating the mundane stuff every standards-compliant webpage needs.
Project Themes
To start a new project using a theme, go to File > New Project > From Theme.
Title your project, choose a location where it will be saved, pick a theme from the drop-down list, and click Save. Click the down arrow next to Project to expand the Finder.
You now have an instant website! Feel free to use it as-is or make all the changes you want.
File Themes
To create a new file using a theme, go to File > New File.
Provide a file name, choose where the file will be saved, assign it to an open project, choose the theme you’d like to use from the drop-down, and click Save. Click the down arrow next to File name to expand the Finder.
In our example, we created a new HTML file using the HTML5 theme which automatically generates the code you need for your page to be standards compliant. You’ve now got a starting point for a new file without having to type out all that stuff from memory.
One more thing before we talk about how to create your own themes: see those words up there with % signs around them? Those are placeholder variables. You can define placeholder variables and their values in the Placeholder tab of the Settings menu, so a brand new theme uses that value instead of the variables you see above.
Creating and Editing Themes
This section may be for advanced users only, but feel free to dive in! By locating the XML files for the themes found on your computer, you can make any change you like to your available themes. This can be especially helpful when used with the Placeholders found in the Settings menu.
To view available themes in the Finder, you’ll need to show the contents of the Web Editor application. To do this, open the Finder, find the Applications folder on your computer, and right-click the file named Web Editor.app to display a context menu. Choose Show Package Contents.
You can now navigate the contents of the Web Editor package. Go to Resources > themes to display the folders that contain available themes.
File themes are managed in the filethemes folder, and Project themes are managed in the project-themes folder. Each theme is an XML file that can be opened with the Web Editor and edited.
Themes should not be saved to this folder! If you create a new theme or edit an existing one, save it in its corresponding folder in the /User/[username]/Library/Application Support/CoffeeCup Software/Web Editor/ folder.
In OS X Lion, this “Library” folder is hidden by default. To show this hidden folder, open the Terminal, type the following line, and hit Enter:
defaults write com.apple.Finder AppleShowAllFiles YES
Then Alt+right-click the Finder icon and choose Relaunch for the hidden files and folders to display. (The same command line with “NO” instead of “YES” will hide those files and folders again.)
One important task that can be performed when creating or editing a theme is the use of the placeholder variables to insert new content. Variables are useful because they can be placed in many different themes so the same information is inserted into many different types of files. This placeholder value can be changed at any time, and the value will be inserted into all the themes that carry that variable instead of having to go through and edit each one.
For example, each themes can be edited to include a variable called %DISCLAIMER%, as seen in this
version of the edited HTML5 theme:
A value can be assigned to the %DISCLAIMER% variable by opening the Settings menu and clicking the Placeholder tab. Simply create a new placeholder and enter its associated value.
In the following example, we have written a short message that will be inserted into all themes that use the %DISCLAIMER% variable. Also note that placeholders have been created for other variables that are used by our example theme:
Now when a new file is created using our modified HTML5 theme that uses the %DISCLAIMER% variable, our message will appear in place of the variable:
Also, if you have an existing project that you would like to save for future use as a theme, simply rightclick the project name in the Project Explorer and choose Save as Theme.
Now that you know how to edit themes and use placeholder variables, starting new projects and files should be more flexible than ever. Good luck!
