Stylish Threadbit Layout

[ku-med]

Hello everyone!

I didn't like the way of replies/views count column how it's displayed.

So I've asked for specific changes in the threadbit to look like this:

Removal of replies/views count column
Moving them under the thread title
Adding cool icons before the thread starter \ replies count \ views count \ last poster \ last post date & time

https://vborg.vbsupport.ru/external/2015/01/19.png

But no one have answered me, so I tried to dig in how to do that. Finally, I've figured it out so i thought of sharing it :D

This based on trials and errors, so backup your templates before doing any changes just incase something wrong happen.

Template that will be edited:
Threadbit
Forumdisplay
Threadlist.css

New phrases that need to be added for icons: 5 ( 13x11 pixel )

Step (1) Let's start by adding the phrases:
Languages & Phrases -> Phrase Manager -> Add new phrase
Phrase type: Global
Product: vBulletin
Varname: ThreadStarterIcon (as your wish what do you want to name it .. )
Text: <img src="image url">

* Repeat the steps for the remaining icons ( RepliesCountIcon \ ViewsCountIcon \ LastPosterIcon \ LastPostTimeIcon )
** Check the attachments if you want to use the same icons that I've used.

Now let's move to the template editing part

Step (2) === Threadbit template ===

(A) Find:
{vb:rawphrase started_by_x_y_z_a, {vb:link member, {vb:raw thread}, null, 'postuserid', 'postusername'}, {vb:raw thread.postusername}, {vb:raw thread.startdate}, {vb:raw thread.starttime}}

Replace it with the following:
{vb:rawphrase ThreadStarterIcon} <a href="{vb:link member, {vb:raw thread}, null, 'postuserid', 'postusername'}" class="username" title="{vb:rawphrase started_by_x_y, {vb:raw thread.postusername}, {vb:raw thread.startdate}, {vb:raw thread.starttime}}">{vb:raw thread.postusername}</a> {vb:rawphrase RepliesCountIcon} {vb:rawphrase replies}: {vb:raw thread.replycount} {vb:rawphrase ViewsCountIcon} {vb:rawphrase views}: {vb:raw thread.views}

P.S: Change the red color with your newly added phrase "Varname" if you name it differently ..


(B) Find & remove the following:
<!-- threadstats -->
<vb:if condition="!$show['notificationtype']">
<ul class="threadstats td alt" title="<vb:if condition="$thread['dot_count'] > 0">{vb:rawphrase have_x_posts_in_thread_last_y, {vb:raw thread.dot_count}, {vb:raw thread.dot_lastpost}}</vb:if>">
<vb:if condition="$show['threadmoved']">
<li>&nbsp;</li>
<li>&nbsp;</li>
<vb:else />
<li>{vb:rawphrase replies}: <a href="misc.php?do=whoposted&amp;t={vb:raw thread.threadid}" onclick="who({vb:raw thread.threadid}); return false;" class="understate">{vb:raw thread.replycount}</a></li>
<li>{vb:rawphrase views}: {vb:raw thread.views}</li>
</vb:if>
<li class="hidden">{vb:rawphrase rating}{vb:raw thread.rating} / 5</li>
</ul>
</vb:if>


(C) Find:
{vb:raw memberaction_dropdown}
Before it add:
{vb:rawphrase LastPosterIcon}


(D) Find:
{vb:raw thread.lastpostdate}
Before it add:
{vb:rawphrase LastPostTimeIcon}


Step (3) === Forumdisplay template ===

Find & remove the following:
{vb:rawphrase replies}{vb:raw sortarrow.replycount}</a> / <a href="{vb:link forum, {vb:raw foruminfo}, {vb:raw pageinfo_views}}" rel="nofollow">{vb:rawphrase views}{vb:raw sortarrow.views}</a>


Step (4) === Threadlist.css template === ( for the adjustment of the columns width after removal the views & replies counts column )

(A) Find ".threadbit .threadinfo {" and adjust the numbers in the red based on your style till you get it aligned properly.

.threadbit .threadinfo {
width: 74%;
min-width: 350px;
}


(B) Find ".threadlisthead span.threadinfo {"


.threadlisthead span.threadinfo {
width: 64%;
}


https://vborg.vbsupport.ru/external/2015/01/20.png

I think that's it! :) Hope I've recalled what i did correctly :p and hope you like it. ;)

[thetechgenius]

You say to make phrases with the text "<img src="image url">", but where are the images? If we don't have the images we cannot put the URL to the images. Are we suppose to make are own images?

[ku-med]

Hmm .. I thought everyone would use his own custom icons that fit his style :D
Anyway I've uploaded the icons, check the attachments :)

[friendlymela]

wow this is nice