How to Create Themes
This page is a simple introduction. For a more comprehensive tutorial on theme creation, see Creating Reason Themes in the Reason Developer Zone.
Wondering, "what are themes?" Read the Reason terminology entry for themes.
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.
- 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.
- Create a new Reason theme
- In Reason, go into the Master Admin and click on "Themes."
- Click "Add Theme."
- Fill out the theme form.
- 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 quite as standards-compliant, provides a gentler learning curve for those new to CSS.
- If you want to go beyond the HTML provided by the pre-installed templates, you can create a new template.
- Save and continue editing.
- Tell Reason where your CSS file is
- Click on the link labeled "CSS Files" in the left sidebar.
- 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 //www.example.com/css/my_new_theme.css, 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.
- 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.
- Apply the theme to a site
- Go to Sites and either edit an existing site or create a new site.
- In the Theme field, choose the your new theme.
- click the "Save and finish" button.
- Edit the CSS to acheive the style and/or layout desired.