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:


Above is the default setup.



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!

[Lynne]

This is the post title code:

                    <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>

so just remove it from where is currently is, and put it right above the text here:

<p class="cms_widget_post_content widget_post_content">{vb:raw post.previewtext}
                        </p>

[mobosix]

Gamefill, did you ever figure out how to add a break between parts of the code? I've moved the title and user/time stamp to the top, but I've not been able to get a line break between the user/time stamp and the preview text. I'd also like one at the text, or maybe adjusting the padding or something is a better way to do that part (not sure how though)?

[Lynne]

Have you tried just using a break - <br /> ?

[mobosix]

Yes, I tried that with no success.