One of the blog's great strengths is its dynamic nature - authors can easily change its content, and readers can easily see the most recent entries. But there is some content that you might want to remain front and center throughout the semester: the course syllabus, your grading policy, a list of links, and other sorts of things that you might normally put on your QC home page. By making a few tweaks to MT's templates, you can have the best of both worlds: a dynamic blog with some static content. Click here to see an example of these templates in action. Implementing this three-column layout takes only a few minutes and requires little more technical knowledge than the ability to copy and paste blocks of text. This tutorial will guide you through each step of the process. In order to distinguish between various kinds of static and dynamic content, we will be utilizing Movable Type's Categories feature. Section 1 of this tutorial explains how to create the categories that you'll use for this purpose. Section 2 explains how to change MT's templates to recognize these new categories and display them properly on your blog. Sections 3 and 4 are for the intermediate or advanced user who wants to customize the layout even further. Important: This process is intended for faculty bloggers only. Students who follow these instructions will find important parts of their blogs, such as the class blog roll, broken or missing. |
(1) Creating the necessary categories
The first step is to create the three categories that will allow MT to distinguish between dynamic and static content. This process is explained in detail below. Here is an overview of the three categories and their purposes:
Click here to take another look at the sample site to see how this will work. |
| To create a new category, first click on the Categories button in the left-hand menu, under the Configure category. |  |
| Click on "Create new top-level category". |  |
In the box that appears, type pages and click "Create Category".
Important: The category name "welcome" is the label that Movable Type will look for when building your blog's layout, so it's very important to type the name correctly, in all lower-case letters. If the category name is entered incorrectly, its corresponding entries will not display properly on your blog. Repeat these two steps to create the top-level categories welcome and dynamic. These two category names must also be typed in all lower-case letters. |
 |
(2) Replacing the default templates
|
In the previous section, you created some categories to organize your blog posts. In this section, you will tell MT how to display these categories correctly. This is accomplished by replacing MT's default templates with the custom three-column templates that are provided below. Click here to log into MT and click on the name of the blog you'd like to edit. (This link opens in a new window, as you'll need to have both this window and your MT window open at the same time during this process.) On the left-hand menu, find and click the "Templates" button, under "Configure". |
 |
These template files dictate your blog's layout and appearance. We're going to replace them with the custom-built templates found below. What follows are detailed instructions on how to do this for the "Main Index" template, but the process is identical for each of the four required templates. The four links below open into new windows that include the code that will replace the default code. Click on "Main Index Replacement" below.
Highlight all of the text in the box by pressing Ctrl-A, or Cmd-A on the Mac. You can also hold down the mouse button and drag the cursor over all of the text. Once the text is highlighted, copy it by either pressing Ctrl-C/Cmd-C or by right-clicking on the text and choosing "Copy". |  |
| Find the window, opened a few steps earlier, with the words "Index Templates" in its title. Click on "Main Index". |  |
Now we'll replace this code with the code you copied a few steps ago. Highlight and delete all of the code in the large text box entitled "Template Body". Then paste the new code by clicking on the Template Body box (make sure that your blinking cursor appears in the box) and either typing Ctrl-V/Cmd-V or right-clicking and choosing "Paste". After you've successfully pasted the new code, click the "Save" button, just beneath the Template Body box. |
 |
| Click on the Templates button in the left-hand menu (the same one you clicked earlier) to get back to the Index Templates page. Repeat the process just described with the three remaining templates: the Stylesheet, the Category Archive, and the Individual Entry Archive. The Stylesheet is found on the same page as the "Main Index" template, and you can find the Category and Individual Entry Archives by clicking on the "Archives" tab, as shown at the right. |  |
Now it's time to test these new templates. Click Rebuild Site (at the bottom of the left-hand menu), and choose "View your site" once the rebuild process completes. Your site should now have three columns: the left one containing, among other things, the "Meta" category; the right one containing, among other things, your blogroll; and the middle one empty. Your new layout is now ready for use. Content that you would like to appear perpetually at the top of your blog's middle column should be contained in a new entry, in the category welcome. Blog-like entries destined for the middle column should be placed in the dynamic category. And static entries like your syllabus should be in the pages category. Please note: After completing this process, you'll notice that "welcome", "dynamic", and "pages" appear under the Categories heading in the right-hand column of your blog. You are encouraged to follow the steps in Section 4 of this tutorial in order to set up subcategories, a process that will automatically hide these three category headings and replace them with meaningful subcategories of your choosing. If you do not plan to use the subcategory feature described Section 4 and would like to remove the Categories section of your right sidebar altogether, please contact QCblogs@qc.cuny.edu. Click here for a primer on using MT's Categories feature to label a new entry. Click here to take another look at the sample site and get a feel for how the system works. Sections 3 and 4 are for those users who want to customize their new three-column layout even further. |
(3) Customizing your color scheme
Using these custom templates means that Stylecatcher themes are no longer compatible with your blog. What follows describes some alternate methods for customizing your site's color scheme. I've created a few ready-made stylesheets that you can simply cut and paste into the Stylesheet template, as per the instructions in section 1 of this tutorial.
In the left-hand menu, click on "Templates". Then click on "Stylesheet", near the bottom of the list of Index Templates. Written in a language called CSS (short for Cascading Style Sheets), the code in the Template Body box of the Stylesheet determines the colors and fonts for your entire blog. |
 |
You only need to know a few things about CSS syntax to edit it yourself. (Click here for more in-depth information.) The general format of a line of CSS is like this: body { color: black; }where "body" refers to the part of the web page whose style you're editing, "color" is the property being modified, and "black" is the value you're assigning to that property. Note how "color: black" is followed by a semi-colon and surrounded by brackets: this punctuation is crucial to the stylesheet, so be careful not to leave it out. Comments are notes that have been added to the stylesheet to help others understand it better, and have no effect on the page. They are punctuated like this: /* #container - the main center portion of your blog */Your stylesheet has been heavily annotated with such comment in order to show you which parts of your site you'll be affecting when you change the style. All the CSS you'll need to edit has been sorted and moved to the top of the stylesheet. The colors in CSS can be specified either by color words like "black" and "red", or by hexadecimal codes, such as the ones found on this page. Try swapping out some of the codes in your stylesheet with some that you find on this page, rebuilding the stylesheet (with the "Save and Rebuild" button), and checking out your site to get the feel of CSS. It's a good idea to keep backups of your stylesheet on your computer, as MT does not keep backups of your work. Do this by pasting the contents of your stylesheet into a Word document. If you ever break your stylesheet beyond repair, simply replace the broken version with the custom-built Stylesheet Replacement, as per the instructions earlier on this page. |
(4) Using subcategories to organize dynamic content
This three-column layout uses MT's Categories feature to sort dynamic from static content. You might want to further organize the content of your site, however. For example, the category dynamic contains all your blog-style entries for the term, appearing in the middle column of the blog. But these posts might very well be of various types: writing prompts, announcements, links to news articles, etc. By creating subcategories under the top-level category dynamic, you can group these posts in a logical way. |
Click on the "Categories" button in the left-hand menu of your admin page to reach the Categories page. If you've followed the instructions in section 2 of this tutorial, you should see three top-level categories: dynamic, pages, and welcome. To add a subcategory to dynamic, click the "Create" link directly across from "dynamic". |
 |
In the box that pops up, title the subcategory however you'd like. Unlike with the top-level categories, capitalization here is unimportant, so you can mix upper- and lower-case letters however you'd like. |
 |
Test out the new subcategory by composing a new entry and assigning it to this subcategory. Publish and save the entry, rebuild your blog, and view your site. The post should appear in the middle column of your blog. In addition, you'll find a new link under the "Categories" heading in the right-hand menu, as shown here. By clicking on this link, readers can see just the entries in the Announcements subcategory. Repeat this process to add as many subcategories as you'd like. |
 |