Getting ready

To follow along with this recipe you will need the Metamorph Glowing open source web template. This file is available with the book code in chapter 2 and can be freely found on the internet. A search for open source web templates will disclose a trove of options for implementing a custom theme. In some organizations the Front End coder will create the mock-ups to be handed to the Engineer to implement into the CMS, which is where we are at.

How to do it...

1. Web template package. Download the required file package for this lesson. The idea situation is to have semantic html and modular css style implementations, so that you can move around the components and parts of your site freely. The consequences of abusing the cascade order in styles could potentially become costly in developing your application. That being said, the most important thing is that the html and css go together.

2. Create Template Element. Create a Template Element in the Manager by going to Manage Elements > Templates > New Template. Complete the Template Name field and provide a description. Provide a category name in New Category to organize the different Template Elements you will be creating. The Template Code must be updated to reflect the location of the styles and images on your server. The page will not display properly until this has been done.

3. Refactor Template Code. Remove the page content and put code in the Site Tree as a New Resource. Most of our pages will adopt some the same styles and conventions. This code we will store in the Template. For the time being, we will abstract the content of the page into a resource. Eventually we will remove the chunks of code used in parts such as our header and footer and illicit these in MODx Evolution Chunks and Snippets. Within the header and footer will have other pieces of code that can be associated with specified Template(s). This can prove to be very useful in managing our Resources as it provides text input areas and can parse tags from the Evolution API.

4. Launch CMS Page. Make sure you call your Javascript and CSS files in the right locations or your site may not display correctly. The location of your styles and images will change once you have moved the template onto your server. Convention advises we create a folder in / assets to store our dependencies. In our case we have created a folder titled /MetamorphGlowing and have placed our files there. The href attribute value of the link element containing the style declarations is preceded by /assets/MetamorphGlowing as well as the src attribute value of the required images.

How it works...

Evolution makes it quick and easy to implement your own designs into the Content Management Framework (CMF). There is no need to understand the technical implications of a theme system or template engine. Simple include your code in the right places and reference your dependencies accordingly.

Start first by extracting the contents of the file into your assets folder. In your Manager, browse to: Manage Elements > New Template. Insert the markup from the index.html file. Remove all the code within the body element of your doc, and in its place, leave the Evolution content placeholder, [*content*].

Edit your style and script references to point to the appropriate location, after upload them to your server. Create a new Resource and paste the code you removed from within the body. Assign a title and description accordingly, and proceed to update the image references. Create Chunks and Template Variables from the content of this page.

There's more...

Although the site is ready to preview, it's not quite ready to hand off to your client just yet. Now you are ready to refactor your Elements by creating Template Variables, Chunks, and Resources to manage your site. Template Variables are accessible to the Templates you specify, while Chunks are parsed regardless of the template type. Snippets contain php code which can often come in the form of an external file, or, the code is often embedded in the textarea. When php code is used in an external file the php open and close tags are required. This is not the case when using the php code in the text area in the Manager.