Learning Movable Type: Entry Titles Linked to Permalinks


mtbadge-small.gif If you are using Movable Type default templates, the titles of your entries on the main page of your MT blog are just that - titles. They look pretty but go nowhere. If you want to get from the entry on your main blog page to its individual entry page, you need to click on "Permalink" or "Continue reading".

Setting it up so that the titles of the entries themselves are hyperlinks to the individual entry page is fairly straightforward and requires edits to two templates - your Style Sheet and the Main Index template.

If you are using the default MT3.2 templates

1. The Stylesheet The MT3.2 default stylesheet is a huge file. The last time I printed one out it took 18 pages. It is easiest to edit your stylesheet by opening the stylesheet template and copy and pasting the entire template into a text editor (e.g. BBEdit for the Mac). The stylesheet is divided in sections. The first section is called Base Weblog, and contains the sub-sections basic elements, standard helper classes, page layout, banner user photo, content, modules, position everything, and mt calendar. Do not make changes to anything in this Base Weblog section. Keep going until you find your theme section. In the case of the template that comes with a new MT weblog, the beginning of the theme section is this:

/* Vicksburg (theme-vicksburg.css) */

Right after the /* basic page elements / section, you'll see the / page layout */ section. Find the .entry-header class. It will look like this:

.entry-header
{
   margin-top: 0;
   border-left: 5px solid #dae0e6;
   padding: 0 0 0 10px;
   color: #666;
   font-size: 18px;
}

Add the following classes to your stylesheet, right after the .entry-header section.

.entry-header a {
    text-decoration: none;
    color: #666;
}

.entry-header a:link {
     color: #666;
}

.entry-header a:visited {
     color: #666;
}

.entry-header a:hover {
     color: #709800;
}

You could also write out the same code in a more condensed fashion:

.entry-header a, .entry-header a:link, .entry-header a:visited { text-decoration: none; color: #666; }
.entry-header a:hover {
    color: #709800;
}

Change the color in the .entry-header a:hover section to reflect the color you want when the curser is over the title.

Save and rebuild your template.

2. The Main Index Template Find the following line of code in your Main Index template:

<h3 class="entry-header"><$MTEntryTitle$></h3>

Change it to the following:

<h3 class="entry-header"><a href="<$MTEntryPermalink archive_type="Individual"$>"><$MTEntryTitle$></a></h3>

Save and rebuild your Main Index template.

If you are using MT version 3.1 or earlier

If you are using an earlier version of MT, you still need to make adjustments to the Stylesheet and Main Index templates.

1. The Stylesheet Add the following four classes to your stylesheet:

.title a {
    text-decoration: none;
    color: #333333;
    }

.title a:link {
    color: #333333;
    }

.title a:visited {
    color: #333333;
    }

.title a:hover {
    color: #709800;
    }

Change the color of the first 3 classes to reflect what you would like the title color to normally be. To keep the same color that you already have, see the color that is noted in the .content h3 section of your stylesheet. Change the color of the .title a:hover class to reflect the color you want to display when the cursor is hovering over the title to indicate that it is a hyperlink.

You may also need to add

text-decoration: none;

to the .content h3 section of your stylesheet, you don't want your titles to be underlined.

Save and rebuild your stylesheet.

2. The Main Index Find the following line of code in your Main Index template:

<h3><$MTEntryTitle$></h3>

Change to

<h3 class="title"><a href="<$MTEntryPermalink archive_type="Individual"$>"><$MTEntryTitle$></a></h3>

Save and rebuild your index template.

Please note that I am NOT an expert in CSS, at all. There are probably more elegant ways to achieve the linked entry title. If you know of one or two, please let us know in the comments. Thanks!


Posted by Elise Bauer on November 4, 2005 4:54 PM to Learning Movable Type http://www.learningmovabletype.com/