A Quick-Start Guide to Creating Themes for the Garden Platform

With Garden, you have full control over both the CSS and the actual HTML of every page in every application. The easiest thing for most designers is to just alter the CSS, so we'll start there:

Part 1: CSS & Design

1. Copy the /themes/default folder and rename it to your theme name so it sits in the root theme folder like this: /themes/your_theme_name.
2. Open the "about.php" file and edit the information to reflect your theme's information.
3. Grab the style.css file from /applications/garden/design/style.css and copy it to your theme's "design" folder. The style.css file contains 90% of the user-facing class definitions. Every application also has it's own css file for application-specific customizations, so you'll probably also want to grab the /applications/vanilla/design/vanilla.css file and copy that to your theme's design folder as well.
4. Go to your Dashboard > Themes, and apply your new theme.
5. Edit the css file to your heart's content. One best-practice we follow is to append our CSS changes to the bottom of the file instead of altering the existing css. This allows you to easily replace the application's original CSS should it change during an update at some time in the future.

Other things you should know:

• If you want to edit the look & feel of the garden/administrative screens, you can accomplish it by copying the /applications/garden/design/admin.css file to /themes/your_theme_name/design/admin.css and edit it there.

Part 2: HTML & Views

If you don't like the way we've structured our Html, you can edit that too. Our pages are made up of two parts:

1. Master Views: These represent everything that wraps the main content of every page. If all you want to do is add a menu or banner above Vanilla, this is the only file you will need to alter. To do so, copy the default master view from /applications/garden/views/default.master.php to /themes/your_theme_name/views/default.master.php and edit it there.
2. Views: These represent all of the content in each page. Every application has a "views" folder that contains all of the html for every page. So, for example, if you wanted to edit the html for the discussion list, you could copy the views from /applications/vanilla/views/discussions to /themes/your_theme_name/views/discussions and edit them there.

Other things you should know:

• The administrative screens have their own master view. If you want to change their master view, copy the /applications/garden/views/admin.master.php file to /themes/your_theme_name/views/admin.master.php.