Switching Username for Title

[GamerFill]

Hey there, I've currently got a Widget on my main CMS page (the "Recent Forum Posts" widget), and I would like to move the Topic Title above each entry instead of below it, and move the poster's username/post time in place of where the title was.

Example of what I mean visually:
https://vborg.vbsupport.ru/external/2010/11/1.png

Above is the default setup.

https://vborg.vbsupport.ru/external/2010/11/2.png

Above is what I want done.


I would also like a slight break between the Username/Post Time, and the next comment. All entries look slightly crammed together, so even one extra line between every comment would be much nicer looking. Also, I'd like the Username/Post Time to be CLOSER to the comment it belongs to.


My exposure to this is almost brand-new, so I wasn't sure where to move anything. So instead, here is the entire code for the widget:
<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3><img alt="" src="{vb:stylevar imgdir_cms}/widget-forum.png" /> {vb:raw title}</h3>
</div>
<div class="cms_widget_content widget_content">
<vb:each from="posts" key="postid" value="post">
<div class="cms_widget_post_bit widget_post_bit">
<div class="cms_widget_post_userinfo widget_post_userinfo">
<vb:if condition="$post['username']!='guestuser' AND $vboptions['avatarenabled']">
<div class="cms_widget_post_useravatar widget_post_useravatar">
<a class="comments_member_avatar_link" href="{vb:link member, {vb:raw post}}">
<vb:if condition="$post['avatarurl']" >
<img src="{vb:raw post.avatarurl}" alt="{vb:raw post.username}" />
<vb:else />
<img src="{vb:stylevar imgdir_misc}/unknown.gif" alt="{vb:raw post.username}" />
</vb:if>
</a>
</div>
</vb:if>
</div>
<div class="cms_widget_post_comment<vb:if condition="!$vboptions['avatarenabled']">_noavatar</vb:if> widget_post_comment<vb:if condition="!$vboptions['avatarenabled']">_noavatar</vb:if>">
<p class="cms_widget_post_content widget_post_content">{vb:raw post.previewtext}
</p>
<vb:if condition="$post['posttitle']">
<h4 class="cms_widget_post_header widget_post_header">
<a href="{vb:link thread, {vb:raw post}}">{vb:raw post.posttitle}</a>
</h4>
<vb:else />
<h4 class="cms_widget_post_header widget_post_header">
<a href="{vb:link thread, {vb:raw post}}">{vb:raw post.title}</a>
</h4>
</vb:if>
<vb:if condition="$post['username'] == 'guestuser'">
{vb:raw post.username}
<vb:else />
<a href="{vb:link member, {vb:raw post}, null, 'userid', 'username'}">{vb:raw post.username}</a>
</vb:if>
{vb:raw post.date}<vb:if condition="!$show['detailedtime']">, <span class="time">{vb:raw post.time}</span></vb:if>
<a href="{vb:raw post.url}">
<img src="{vb:stylevar imgdir_button}/lastpost-{vb:stylevar right}.png" alt="{vb:rawphrase go_to_last_post}" />
</a>
</div>
<vb:comment>
<div class="cms_widget_views">{vb:raw post.replycount}&nbsp;{vb:rawphrase replies}</div>
</vb:comment>
</div>
</vb:each>
</div>
</div>
</div>


Thanks a trillion to whoever is willing to help me out!