March 28, 2005

Templates

Templates help you control the design and layout of your blog. If you want to customize the look of your blog, a good place to start is to try out one of the default templates that come with the MT installation. The UThink Movable Type system has a beta tool called the Template changer which provides you with a nice set of custom templates. This can be used as a good starting platform to build your own templates to achieve the look and feel that you want.

Posted by kilam002 at 7:09 PM

March 27, 2005

Changing the look of your blog

Finding the necessary files:

1. Login to your Movable Type system (UThink, at the U of M)
2. Select the blog you want to edit (if you have more than one)
3. In the menu on the left hand side select Templates (List and Edit Templates).

notifications1.jpg

Under Templates, you will find various types of files including

a) Index Templates
b) Miscellaneous Templates
c) CSS Stylesheet

template0.jpg

Aside from using the Template Changer, it is up to you to make changes to these files in order to get the desired look and feel out of your blog. You will need some basic HTML and CSS knowledge in order to make these changes. (If you're not well-versed in HTML or CSS, one excellent tutorial and reference book is "HTML for the World Wide Web" by Elizabeth Castro).

Posted by kilam002 at 10:50 PM

March 26, 2005

Files to change

Types of files

1. Index Templates
Index templates are the files which control the appearance and content of the index files in the blog, including the home page. We will deal with these files as they are the most commonly used ones. These include:

  • the Main Index which controls the default (home) page of the blog,
  • the Master Archive Index which controls the look of the archives (though see 2. below), and
  • the Stylesheet.

2. Archive-Related Templates
These control individual archive pages, for category-based, date-based, and individual entry based pages. These pages are much more functional than the Master Archive Index, if you want to modify the archive pages.

3. Miscellaneous Templates
These control various minor elements on the weblog site (and so you're less likely to be interested in them initially). These include:

  • Comment Listing Template
  • Comment Preview Template
  • Comment Error Template
  • TrackBack Listing Template
  • Uploaded Image Popup Template

Posted by kilam002 at 10:58 PM

March 25, 2005

Main Index

One simple thing many people want to do on their blog home page is to add some new links on the sidebar. We'll use this task as an example of how to modify the main index.

From the main Templates page in Movable Type, click "Main Index" to bring up the code for the main index file. The Main Index is structured with many divisions ("div"), including <div id="links">, which is the overall container for the sidebar. Find the part of the file that reads:

<div class="sidetitle">
Links
</div>

<div class="side">
<a href="">Add Your Links Here</a><br />
</div>

You can simply type in your links over "Add Your Links Here," a la:


<div class="sidetitle">
Links
</div>

<div class="side">
<a href="http://www.umn.edu">University of Minnesota</a><br />
</div>

Posted by messn006 at 11:28 AM

March 24, 2005

Stylesheet

The stylesheet template is the CSS (cascading style sheet) file that governs the colors, font types and sizes, and all other style elements of your weblog. The default name of the file is styles-site.css, but you can choose any file name you want, as long as it ends with .css. (If you do change the file name, you will need to reflect those changes in the header section of your main index and archive templates.)

Posted by kilam002 at 11:51 PM

March 23, 2005

Stylesheets explained

Movable Type uses CSS elements defined in your weblog's stylesheet template to control font sizes as well as other style factors. The following graphic indicates which default stylesheet classes correspond to which heading and text elements in the default Gettysburg style.

templ2.gif

Posted by kilam002 at 11:15 PM

March 22, 2005

Stylesheets Example

To give a sense of how you can use the stylesheet to change the appearance of your site, we'll go through a simple example. Suppose you want to change the color of the banner and the font of the title of the blog. The code in the main index that creates the banner is:




<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<span class="description"><$MTBlogDescription$></span>
</div>

The parameters for "banner" are defined in the stylesheet under #banner:


#banner {
font-family: arial, helvetica;
background-color: #cccccc;
border: 1px solid #888888;
color: #000000;
}

Your result would look like this:

template1.jpg

The current font is a sans-serif font, arial, the text is black, and the background color is grey. Suppose we want to spiff up the site and change the background color to red and the font to Times New Roman and in white color. You need to change the corresponding stylesheet parameters to look like this.



#banner {
font-family: Times New Roman, serif;
background-color: #B22222;
border: 1px solid #888888;
color: #FFFFFF;
}

Which would make the page look like this instead:

template2.jpg

But wait -- we're only two for three. The background color changed and the font changed (note, the font of both the headline and the description (subhead) changed, because both are fall under the "banner" division in the index page).

But the headline text is still black. Unfortunately, we also have to change the stylesheet in another place, because the banner text is defined as an anchor (link) on our page, and the banner anchor is also defined separately in the stylesheet (don't ask me why the default stylesheet is set up this way...). So we have to also change:



#banner a, #banner a:link, #banner a:visited, #banner a:active, #banner a:hover {

color: #000000;

font-size: xx-large;

font-weight: bold;

text-decoration: none;
}

to:




#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {

color: #FFFFFF;

font-size: xx-large;

font-weight: bold;

text-decoration: none;
}

to get:

template3.jpg

Note that only the banner headline changed color -- unlike the font change, the color change didn't carry through to the description. This is because the "description" color is defined separately in the default stylesheet (but the font isn't).

Posted by kilam002 at 11:58 PM