Web Design in Oklahoma City

Several readers have asked for step-by-step instructions for converting existing website templates for use with our Water, Sky, and LightCMS products. This is useful if you have a design you like on your existing website, but you want to move it over to a content management system. Similarly, you might want to covert a template created by another designer — even if it was created to be used with another system.

The good news is that our CMS was created specifically to make it easy to convert any HTML pages into templates without needing to know a lot about HTML, PHP, ASP, or other coding languages. Just open the HTML in your favorite editor and drop in our tokens. (This tutorial assumes that you are familiar with basic HTML and a suitable text editor. In this case, I’m using MacroMates’ TextMate, but most any text editor will do).

Getting Started

Click for larger image

The first thing we’ll need is a template. For our example, I have downloaded a free, open source template from Open Web Design. They offer free design templates released under a Creative Commons license. I chose BlueBusiness01, which has a nice, clean look suitable for lots of different websites. I downloaded the source files to my desktop.

Next, I opened the template's .HTML and .CSS files in my editor so that I can begin adding the template tokens. Template tokens are small bits of code that you add to your HTML that tells the CMS where to output certain content. For example, the token <$pagetitle/$> will output the title of the page wherever you place it in your template. We have a complete list of available tokens along with optional attributes and usage examples on our support website. When converting templates I often reference this website and copy/paste the tokens directly into my HTML.

Adding Tokens

The first token we add will be the Page Title. I often use this token inside the <Title> tag of my template so that the page title shows in the browser’s address bar on every page. The title tag is near the top of your HTML template.

Select the old page title and replace everything between the <title> tags with the Page Title token.

I want to use my logo in the header area of the page instead of the generic company name supplied with the template. All I need to do is  replace that text with the Logo token. Later, in the CMS, I can upload my logo so that it appears on every page.

I removed the slogan

Then selected the text page title

And replaced it with the Logo token

Next, we’ll add our first Editable Region which designates a place in the template where authors can drop in elements (content). First, I select the example content from the template in what is designated as the content area. This could be named anything, but in this case the HTML coder made it pretty clear by using comments and logical names for the layout elements. Delete that content and paste in an Editable Region tag. The first region in the largest area of your template should be called "MainContent"

Select and delete all of the sample content

Replace it with an Editable Region token

You can add as many Editable Regions as you need. In this example, the template has a news area and a space for the company address. I have chosen to make each of those a region as well.

Additional Editable Regions

Adding Navigation

A few special tokens are used to automatically generate the navigation menus in the template. This way, when you or your content authors add new pages, the menus will automatically add those pages as menu choices. Your best bet is to find a solid XHTML template that uses the HTML <ul> element for menus. Select the old, static menu and paste in the Root Menu token which will display the top level menu items only — perfect for the main menu. Be sure to remember the CSS class of the original menu and add that as the CssClass attribute of the Root Menu token so that your dynamic menu will be styled just like the original.

Remove the static menu code

Replace with the Root Menu token

The right column of our new template has a section called “More about us” which would be a great place for a list of links specific to the current page/section. We’ll add a Section Menu token to output a list of pages that belong under the current page. This will update automatically as the user browses from section to section. Much like the root menu, we will remove the old menu code and replace it with a Section Menu token, being sure to keep the CSS class name.

Using the section menu token

Uploading to the content management system

Once all of the tokens are in place, save your HTML file so we can upload it to your website. You’ll need to add the HTML, CSS, and any associated images to a ZIP archive that will be uploaded to the server. Next, you will need to log in to your website and visit the Design Manager. Choose My Website from the top menu once logged, in. Then click My Designs and upload design. Once there, browse to the ZIP file you just created and upload it. The system will unpack your files and make them into templates. You will then be taken to the My Designs page where you can apply the design to your site.

1. Zip your template files. 2. Upload. 3. Apply the design.

Customize with your logo

We’re now ready to begin adding content. I’ve added some sample text to the main content region and blog element with a few posts to the news area. I also want to use my company’s logo in the header. By choosing My Website, Settings, Advanced you can upload your logo graphic. My logo is a PNG graphic with a transparent background so that the colored background shows through.

Upload your logo graphic

Ready for launch

A few more pages and a little more content and this website could be ready to launch. You can see the finished website here, demodesign.publishpath.com. I made a few tweaks to the stylesheet to make the design better handle our elements. These fine-tunings are a bit beyond the scope of this article. But you can download the finished templates if you’d like to peek under the hood. This was a basic example that could be used with most any pre-existing HTML template. There are many more tokens and techniques that can be used as well.

Please let us know what you think of this tutorial and whether you would like to see more posts like this in the future. Leave us a comment or a question below. Also, tell us if you have a particular topic you’d like to see covered.