Teasing your entries

Well it’s been far too long since I posted a Movable Type tip, so here goes.

Have you ever wanted to display a blog entry one way on your main index page and another way on your archives page?

Movable Type 3.3x’s default templates now include CSS classes for the body HTML element on various pages published. (Not that you can’t do that with any previous version of MT; it’s just enabled by default now.) This is helpful, since it lets you create CSS rules that are context sensitive.

The body tag for my individual archive template starts like this.

<body class="layout-two-column-right individual-entry-archive">

By the way, there’s no mistake that there are two class names assigned here— this is completely legal as far as CSS is concerned.

So… what can you do with that? Well, for example, let’s say you sometimes want to include a “teaser” phrase that is intended to draw the person reading the summary on the main page (or the RSS feed of the post) to the rest of the entry.

Continue reading to find out how this is done.

To achieve this, we just need to identify the text we want to treat differently using a CSS class. I’ve called mine “tease-in”.

<p class="tease-in">
Continue reading to find out how this is done.
</p>

Then, add the following to your CSS Style Sheet:

.tease-in {
    font-style: italic;
    font-size: smaller;
}

body.individual-entry-archive .entry-body .tease-in {
    display: none;
}

As a result, the “tease-in” element that is within the block with the “entry-body” class that is on a page with a CSS class “individual-entry-tag” body tag is hidden. So this lets me write something to that encourages the reader to continue reading, but at the same time, that text is excluded from the full version of that post (the archive page) since there’s no need to display it— they’re already looking at the page.

Another benefit of using CSS this way is that it doesn’t require dynamic pages to pull it off. It works fine for static or dynamic pages.

What else can you do with this?

  • You can display the first paragraph of the post on the archive page in a different font size or family. (This particular technique won’t work for some browsers that don’t support this kind of CSS selection, but that’s an ever-decreasing set of browsers. For those that don’t support it, it doesn’t cause an error— it just displays without the effect.)

    body.individual-entry-archive .entry-body > p {
        font-size: large;
        font-family: Times;
    }

    Or just the first line of the paragraph:

    body.individual-entry-archive .entry-body > p:first-line {
        font-size: large;
        font-family: Times;
    }
  • You could add an additional CSS class to the body tag to identify the primary category of the entry. You could apply this to your Individual Archive template:

    <body class="layout-two-column-right individual-entry-archive category-<$MTEntryCategory dirify="-"$>">

    For your category archives, you’d use this:

    <body class="layout-two-column-right category-archive category-<$MTArchiveCategory dirify="-"$>">

    Then, you could alter the styles displayed for that page to be different for any category you wanted. Again, since this uses CSS rules, it works fine for statically published content.

    For instance, you might change the banner graphic of the page based on the category:

    body.category-foo div.banner {
       background-image: url(banners/foo.jpg);
    }
  • You can use the last tip as a technique to provide author-specific styles. Again, for your Individual Entry Archive template:

    <body class="layout-two-column-right individual-entry-archive author-<$MTEntryAuthorUsername dirify="-"$>">

    This lets you modify the presentation of the page on an author-by-author basis. Change fonts, images, etc. using the ‘author-name’ CSS class. With CSS’s cascading rules, it’s easy to define a standard presentation for all authors, but then apply overrides on an author-by-author basis.

    (The category tip above can be used in combination with this one.)

TrackBack

TrackBack URL for this entry:
http://bradchoate.com/mt/feedback/tb/1378

6 Comments

Jay Allen Author Profile Page said:

Testing...

Brad Author Profile Page said:

Very interesting, Jay.

sbutzel Author Profile Page said:

Brad: Which template does the Tags Plugin use when it creates a page? Let's say a reader of my blog clicks on the link for the tag 'websites' under one of my entries. MT then opens a page displaying a list of all entries tagged with 'Websites'. I need to be able to customize the code for this template so it looks like all the other main pages in my blog that I have customized. Much appreciate in advance for any help you can provide!
- Steve

sbutzel Author Profile Page said:

Brad: I forget to give you my email address. Here it is:

steven.butzel at nashualibrary dot org.

Charlie said:

<body class="layout-two-column-right category-archive category-<$MTCategoryLabel dirify="-"$>">

Won't work because <MTCategoryLabel> needs to appear within <MTCategories>. You want <MTArchiveCategory> instead:

<body class="layout-two-column-right category-archive category-<$MTArchiveCategory dirify="-"$>">

Tracy said:

Brad,
Please guide me whether I should choose wordpress or movable type as a platform for my upcoming blog. I want to make sure that I choose the best platform that is more easily and highly customizable and which provides enough room for my developer to customize it with a completely unique and custom design template.
Thanks in advance.

About

This article was published on September 30, 2006 11:00 AM.

The article previously posted was Why You Shouldn't Buy iTunes Shows or Movies.

The next article is A Wii Saga.

Many more can be found on the home page or by looking through the archives.

Powered by Movable Type