Creating New Themes

This page is a simple introduction. For a more comprehensive tutorial on theme creation, see Creating Reason Themes in the Reason Developer Zone.

A theme defines the way Reason pages should look. A theme can be applied to any number of sites.

Note: Reason theme creation assumes a basic knowledge of CSS and, for sophisticated theme development, PHP and HTML. You also need to be set up as a Reason administrator with Master Admin access.

  1. Create a CSS file
    • Place a CSS file somewhere on a web server.
    • This CSS file does not have to have any rules in it yet. For example, you might decide to create a directory on the same server as Reason called /css/ and place a (for now) empty file called "my_new_theme.css" in it.
    • You don't even need to place the CSS file on the same server as Reason — as long it is on a web server and you have the ability to edit it, you can incorporate any CSS file into a Reason theme.
    • Make a note of the URL of this newly created CSS file.
  2. Create a new Reason theme
    1. In Reason, go into the Master Admin and click on "Themes."
    2. Click "Add Theme."
    3. Fill out the theme form.
    4. You will see a choice of templates on which to base your theme. For a basic theme you can use one of the provided templates:
      • If you are familiar with CSS layout techniques, we encourage you to choose the "default" template, which produces standards-based, table-free XHTML.
      • If you are just learning CSS, you may find it easier to base your theme on the "tables" template. This template, while not entirely standards-compliant, provides a gentler learning curve for those new to CSS.
    5. If you want to go beyond the HTML provided by the pre-installed templates, you can create a new template.
    6. Save and continue editing.
  3. Tell Reason where your CSS file is
    1. Click on the link labeled "CSS Files" in the left sidebar.
    2. Click "Add External CSS File" and fill out the form. Give the file a descriptive, memorable name, and enter the web address of your CSS file in the URL field.
      • Note: If the CSS file is on a server that supports secure connections (https/ssl), you may want to *not* specify the protocol in the URL. In other words, enter //, leaving off the http: portion of the URL. This way, if someone is viewing a page that contains this CSS file over a secure connection they will not see a browser warning about insecure content on a secure page.
    3. Save and finish the CSS item. It will now be attached to the theme. You can now finish the theme; it should now be ready to be applied to a site.
  4. Apply the theme to a site
    1. Go to Sites and either edit an existing site or create a new site.
    2. In the Theme field, choose the your new theme.
    3. click the "Save and finish" button.
  5. Edit the CSS to achieve the style and/or layout desired.