It's possible you could do all that with just CSS, but it seems like you'd need some freaky position tricks.
The easier way might be to modify the template.
If you open the wppremium/comments.tpl, what you'll see is mostly HTML, which you already know. The rest is for Smarty, the templating engine. Serendipity assigns variables to Smarty, and Smarty prints them out inside the HTML. Smarty can also make choices based on the value of the variables, and even loop through lists (also known as 'arrays') of variables.
You already know the class for the comment, so we'll start there. Right at the top is commentlist. You'll see a <div>, followed closely by a {foreach}. The {foreach} isn't printed into your HTML in any way; it just marks the start of a loop. The loop repeats everything from {foreach} to {/foreach} once for each comment.
There is some HTML in there, as you can see. There are also some other weird stuff wrapped in curly braces. Those are the Smarty variables. Smarty will print the value of {$anything}, which is what contains the comment data.
You want to move the comment-metadata around. That's one big 'ol line; you can split it up if you want, just like HTML. Then you can move the various pieces around however you like them.
Just be careful with the Smarty tags. For instance, for comment-author, there's a span with the author's name. If the author provided a URL to his website, the name is made into a link. Smarty can tell whether to make a link or not by checking for a URL like this:
Code: Select all
{if $comment.url}
begin the link
{/if}
author's name
{if $comment.url}
end the link
{/if}
Of course, it's all run together on one line, but you can change that to make it more readable. And naturally we expect the URL and the comment author to change, so we use Smarty variables for them (in this case, {$comment.url} and {$comment.author}.
You'll notice some other Smarty magic going on, too. For instance, we don't want to print empty author names, so we use the predefined string (based on your blog's language) "Anonymous" for empty authors with the Smarty magic: {$comment.author|@default:$CONST.ANONYMOUS}.
But you don't need to really understand that. What you need is to split the various bits up into chunks, keeping all the Smarty magic intact. Once you've got the chunks, copy them into the order you want (which I believe will be author name, the comment body, the timestamp, the owner's delete link, and the reply link).
Once you've got them in a reasonable order, you can use inline styling (bad designer!) or modify the wppremium/style.css to your own tastes.
The image is probably provided by a plugin, so we'll cover that after you've got the rest hooked up.
And of course, we'll be here if you need any other assistance.
