CSS2 enabled post summeries on main page

Yehaaaa, finally I took the time to create the main page I wanted and I succeeded!. Valid XHTML posts and CSS2 selectors and pseudo-classes did the trick.

I first looked at what others suggested like nevyan.blogspot.com Customize the new blogger template and Expandable Post Summaries from betabloggerfordummies.blogspot.com (heavy site with all light blinking). This was all fine, but I don't want the teaser to be limited by starting a span element. Then I got the idea - since I strive for XHTML compliance (validation being one of them) I'm careful about the markup my posts. I all ways use paragraphs <p>, so what I needed was some way to just show the first paragraph. After some searching I stumbled upon CSS2 :first-child pseudo-class. From then it was just a matter of not showing the rest, except on item pageType. It all comes down to two additions to my template. First some styling to the header:

<b:if cond='data:blog.pageType != "item"'>
div.post-body > p:first-child
{ display:inline; }

div.post-body > * + *
{ display:none; }

</b:if>

This dictates that all other pageType's than item, will display the first paragraph, and all other siblings are hidden. The first and specific CSS instruction take precedence, and the * is an element wild card and the + is for adjacent sibling.

The pageType description is: Can be all, archive, main, or item, with all as the default. The widget will only display on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)

Then adding a second part to the template (just the part in strong, the start is just to give the context):

<div class='post-header-line-1'/>
   <div class='post-body'>
      <data:post.body />
      <div style='clear: both;'/><!-- clear for photos floats -->
   </div>
   <div class='post-post-body'>
      <b:if cond='data:blog.pageType != "item"'>
         <p style="text-align: right; font-size: 150%"><a expr:href='data:post.url' target='_blank'>Read more</a></p>
      </b:if>
   </div>

I had to add another div section since otherwise it would be hidden with the other parts of the post.

The conclusion is that I'm very happy with it. My posts tend to be long and before my main page was extremely long. Now the main page just holds the titles and first paragraphs, and the rest can be read on the individual item pages. The only downside is that the page as in markup i just as long and people might be confused if a search engine leads to my main page, since the search term might very well be hidden - that's under the assumption that search engines don't care for CSS.

Ups, I almost forgot. I seems to work in Firefox, Konqueror and even IE7! IE6 show the complete posts as before, so no harm done and IE6 is slowly loosing to IE7, so this is much better the expected.