« 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.

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.

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 (11)

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 :)

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!

Becka:

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

Roland Author 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?

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

There is so much great information on this amazing site for a beginner like me. I had a question slash comment that will confirm my newness to this. Where exactly is that "stylesheet template" and the "default stylesheet"? i have a template called "stylesheet" but it is just a few lines long. And the template called "default" doesn't have any of the text you talk about. Are these templates accessible from my main menu or are they somewhere else?

Hi.

Many thanks.
That article just remember me, that MT does this not by default. I wonder, if that issue will be "fixed" in version 4 ;-).

@Hitsville: The CSS Stylesheet is an "Index" and called "styles-site.css" by default (MT 3.x) and "base_styles.css" (MT 4beta).

Post a comment

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