Windmill Web Work

Template tags in PivotX often come with a lot of ‘extra features’ that you can use to your advantage when you’re making a template. A good source of information is the PivotX documentation, and then in particular ‘Appendix B‘, which describes all the template tags.
A good example is the [[ comments ]] template tag. This tag has a lot of extra formatting tags built-in, as you can see here.

Now let’s take a fresh PivotX install, which comes with the ‘Skinny’ theme. A typical comments section would look like this:

Skinny

I must say, it looks good ‘out-of-the-box’. However, a lot of blogs these days have a slightly different lay-out for each next comment, just to make a little visual difference between one comment and the next. You can see an example below, from the Designm.ag website:

Designm.ag

As you can see, there is a little difference in the shade of grey they use for the background color. Can PivotX do that? Yes, it can.

Let’s take another close look at the documentation, and you’ll find the %even-odd% templating tag, which returns ‘even’ or ‘odd’, depending on the number of the current comment.

Now, if we take the code for the comments section of the Skinny template file ‘entry_template.html’, we find the comments section around line number 25:

<div class="commentblock">    

	<p>[[ commcount ]]</p>
	[[ comments]]
	<div class="comment">
		%anchor%
		<img class="gravatar" src="%gravatar%" alt="%name%" />
		<div class="comment-text">
		 %comment%
		 <div class="meta">%name%, %email% %url% - %date% %editlink%</div>
		 </div>
	</div>

	[[ /comments ]]
</div><!-- .commentblock -->

Ok, that’s nothing to get scared of. Pay attention to the part between [[ comments ]] and [[ /comments ]], because that is where PivotX loops through all the comments for an entry. You can see that every comment is wrapped in a <div> with the class “comment”. Now, if we make use of the %even-odd% formatting tag, we can give each comment an extra class. Look at the following code, and look especially at the 5th  line:

<div class="commentblock">    

	<p>[[ commcount ]]</p>
	[[ comments]]
	<div class="comment %even-odd%">
		%anchor%
		<img class="gravatar" src="%gravatar%" alt="%name%" />
		<div class="comment-text">
		 %comment%
		 <div class="meta">%name%, %email% %url% - %date% %editlink%</div>
		 </div>
	</div>

	[[ /comments ]]
</div><!-- .commentblock -->

See what I did there? Now every comment will not only get the class “comment”, but also a class “odd” or “even”, depending on the number of the comment we are currently looping through. That’s great, because now, we can style those comments separately. If you look in the style.css file that comes with the Skinny theme, you’ll even find there is no styling for the “comment” class. Apparently that class was only added for semantic reasons.

Now we add the following code to the style.css file:

.comment {
margin:5px 0;
padding:5px;
}

.even {
border:1px solid #888;
}

Let’s look at that entry again, and see what effect that has:

The modified comments section

Of course I could have done a lot more there, with background colors and other bells and whistles, but the subtle border doesn’t disturb the otherwise very simple lay-out of ‘Skinny’ too much I think.

Important note:

If you do want to modify the Skinny template files, it’s better to copy the whole directory /pivotx/templates/skinny first, and rename it to something else. Then go into the PivotX back-end, and set the templates for your weblog to those files. If you don’t do that, you will loose all your changes when you upgrade to a newer version of PivotX, because the ‘Skinny’ directory would be overwritten with the original that comes with PivotX.

Share/Bookmark