« Understanding the Category Listing Code | Main | Adding a Calendar to Your MT Blog »

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!

Comments (9)

Arvind [TypeKey Profile Page]:

With regards to the CSS, you can group various rules like so:

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

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

The major benefit of grouping is the fact that your stylesheet becomes smaller in size and therefore doesn't take as long to load :)

elise [TypeKey Profile Page]:

Hi Arvind,
Thanks for reminding me. I added it to the tutorial.

With an 18 page stylesheet, it almost seems moot, but I guess every little trim helps.

Stephanie_B:

Cool, didn't know ...
More like this please. Thanks!

Excellent suggestion, I never thought about making the entry title to permalink linkable. Thanks so much for the tutorial.

Roland [TypeKey Profile Page]:

This is an excellent tip! Thanks!

Thank you for the tip. I implemented this without any problems. I am a neophite to blogging and your tips are well documented, even for a non-geek like myself. This weblog is invaluable to me!
Pierre

sk:

Don't you really hate the 3.2 stylesheet being THAT long?

Do you think there is anything we can do about it - except for using the old version?

elise [TypeKey Profile Page]:

Hi SK - I'm not entirely happy about an 18 page stylesheet actually. However, I do recognize the flexibility allowed in all those elements. I would definitely not go back to the old stylesheet on any new blog. Will be writing more about the new stylesheets as I find time...

Elise, do you have any idea of how to make the title link to the permalink but linking to a page that does NOT show the comments on that post? thanks - and happy 2006! Massimo

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)