November 04, 2005

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.

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!


Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Trackback

If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/445

Comments

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.

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.

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

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


Post a comment

(Before posting a comment please see the Comments and Trackbacks Policy. Do you need help troubleshooting your weblog? Please post questions and requests for support at the MT Support Forums. Thanks!)




Remember Me?

(you may use HTML tags for style)

Email to a friend

Email this article to:


Your email address:


Message (optional):