Highlight your latest entry in Serendipity blog

The template files we need to modify are our entries.tpl and of course style.css. I'll start with the smarty code. At the beginning of our entries.tpl we have a {foreach} statement that gives each entry its own div container. Below that we have a second {foreach} statement, but we're going to ignore this and concentrate on the first one.

Start by adding a 'name=entryloop' like this;

{foreach name=entryloop from=$entries item="dategroup"}

This tells Serendipity that we want to use the index number assigned for the entries on this page, and tells the server to put the index numbers into an array to be called 'entryloop'. This is important because if we neglect this step we won't be able to use the index number at all.

Remember earlier I said the index starts from 0 (zero) and increments for each entry? Our next bit of smarty code will be an {if} statement that checks to see if the entry has an index of 0, and also makes sure we are on the startpage, which of course will always be our latest entry.

Immediately below the first {foreach} statement is a div that conatins the entry using serendipity_Entry_Date. We want to change this div so that our latest entry uses a different style, which for the sake of this article I'm going to call 'latest_entry'. The code looks like this;

<div class="{if $smarty.foreach.entryloop.index==0
&& $startpage}latest_entry {else}
serendipity_Entry_Date{/if}">

Notice how the smarty code is inside the html code.

Save youe entries.tpl, and if you want to check that this has worked simply view the source of your blog from within your browser. You should notice that the first entry is now contained within;

<div class="latest_entry">

Now we're ready to open our stylesheet and start having fun. I'm going to assume that you are already familiar with the structure of cascading style sheets.

With that in mind lets give our latest entry a border that is green and 1px wide.

.latest_entry {border:green 1px solid;}

Save your stylesheet and view your blog in a browser. Notice the change? Now lets say you only want to adjust the entry title. Some templates (my own included) change the html and stylenames for parts of the entry so you may want to use the default template for this next exercise. Ok, we'll change the color of the font in the entry title to green, and this is where CSS is so powerful, try adding this;

.latest_entry .serendipity_title {color:green;}

Notice you didn't need to change any of your existing styles, you simply needed to add a new style for the entry title if it is contained within the 'latest_entry' container?

Best of luck playing around with your latest entries. Be sure to comment below so other users of Serendipity can see your design.