Forum Display Enhancements - Stylish Threadbit Layout

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:

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

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

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%;
}

I think that's it! Hope I've recalled what i did correctly 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
Anyway I've uploaded the icons, check the attachments

[friendlymela]

wow this is nice