Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Custom Thread Style
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #1
Custom Thread Style
This is a simple way how to create a custom style for thread.
Similar to http://mybbhacks.zingaburga.com/forumdisplay.php?fid=25

Create custom thread fields:
  1. Textbox for Thread background Color:
    • Title: Background Color
    • Key: xtcstyle_btc
    • Description: Color name (eg red) or hexadecimal representation (eg #FF0000)
    • Applicable Forums: Select forum where this application will be applied
    • Input Field Type: Textbox
    • Maximum Text Length: 7
    • Field Input Width: 9
    • Editable by / Required Field?: Everyone
      Modify it as our needs. If only some usergroups allowed to use it, select Custom (specify usergroups), and select those usergroups in Editable by Usergroups  setting.
    • Display Format:

      Code:
      background-color: {VALUE};

    • Text Mask Filter: Color Value
  2. Textbox for Thread Title Color:
    • Title: Title Color
    • Key: xtcstyle_tc
    • Description: Color name (eg red) or hexadecimal representation (eg #FF0000)
    • Applicable Forums: Select the forum above
    • Input Field Type: Textbox
    • Maximum Text Length: 7
    • Field Input Width: 9
    • Editable by / Required Field?: Everyone
      Modify it as our needs. If only some usergroups allowed to use it, select Custom (specify usergroups), and select those usergroups in Editable by Usergroups  setting.
    • Display Order: 2
    • Display Format:

      Code:
      color: {VALUE};

    • Text Mask Filter: Color Value
  3. Edit forumdisplay_thread template. For each td tags there, insert this code:

    Code:
    style="{$GLOBALS['threadfields']['xtcstyle_btc']}"


    And insert this code for the Thread Link tag:

    Code:
    style="{$GLOBALS['threadfields']['xtcstyle_tc']}"

  4. Edit forumdisplay_thread_rating template. Insert this code to the td tag there:

    Code:
    style="{$GLOBALS['threadfields']['xtcstyle_btc']}"


Example full forumdisplay_thread template, based on the default 1.4 and 1.6 forumdisplay_thread template:
1.4:

HTML Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<tr>
	<td align="center" class="{$bgcolor}" width="2%" style="{$GLOBALS['threadfields']['xtcstyle_btc']}"><img src="{$theme['imgdir']}/{$folder}.gif" alt="{$folder_label}" title="{$folder_label}" /></td>
	<td align="center" class="{$bgcolor}" width="2%" style="{$GLOBALS['threadfields']['xtcstyle_btc']}">{$icon}</td>
	<td class="{$bgcolor}" style="{$GLOBALS['threadfields']['xtcstyle_btc']}">
		{$attachment_count}
		<div>
			<span>{$prefix} {$gotounread}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}" style="{$GLOBALS['threadfields']['xtcstyle_tc']}">{$thread['subject']}</a>{$thread['multipage']}</span>
			<div class="author smalltext">{$thread['profilelink']}</div>
		</div>
	</td>
	<td align="center" class="{$bgcolor}" style="{$GLOBALS['threadfields']['xtcstyle_btc']}"><a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a>{$unapproved_posts}</td>
	<td align="center" class="{$bgcolor}" style="{$GLOBALS['threadfields']['xtcstyle_btc']}">{$thread['views']}</td>
	{$rating}
	<td class="{$bgcolor}" style="white-space: nowrap; text-align: right;{$GLOBALS['threadfields']['xtcstyle_btc']}">
		<span class="lastpost smalltext">{$lastpostdate} {$lastposttime}<br />
		<a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
	</td>
{$modbit}
</tr>


1.6:

HTML Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<tr>
	<td align="center" class="{$bgcolor}{$thread_type_class}" width="2%" style="{$GLOBALS['threadfields']['xtcstyle_btc']}"><img src="{$theme['imgdir']}/{$folder}.gif" alt="{$folder_label}" title="{$folder_label}" /></td>
	<td align="center" class="{$bgcolor}{$thread_type_class}" width="2%" style="{$GLOBALS['threadfields']['xtcstyle_btc']}">{$icon}</td>
	<td class="{$bgcolor}{$thread_type_class}" style="{$GLOBALS['threadfields']['xtcstyle_btc']}">
		{$attachment_count}
		<div>
			<span>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}" style="{$GLOBALS['threadfields']['xtcstyle_tc']}">{$thread['subject']}</a>{$thread['multipage']}</span>
			<div class="author smalltext">{$thread['profilelink']}</div>
		</div>
	</td>
	<td align="center" class="{$bgcolor}{$thread_type_class}" style="{$GLOBALS['threadfields']['xtcstyle_btc']}"><a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a>{$unapproved_posts}</td>
	<td align="center" class="{$bgcolor}{$thread_type_class}" style="{$GLOBALS['threadfields']['xtcstyle_btc']}">{$thread['views']}</td>
	{$rating}
	<td class="{$bgcolor}{$thread_type_class}" style="white-space: nowrap; text-align: right;{$GLOBALS['threadfields']['xtcstyle_btc']}">
		<span class="lastpost smalltext">{$lastpostdate} {$lastposttime}<br />
		<a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
	</td>
{$modbit}
</tr>


Example full forumdisplay_thread_rating template, based on the default 1.4 and 1.6 forumdisplay_thread_rating template:
1.4:

HTML Code
1
2
3
4
5
6
7
8
9
10
<td align="center" class="{$bgcolor}" id="rating_table_{$thread['tid']}" style="{$GLOBALS['threadfields']['xtcstyle_btc']}">
	<ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">
		<li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>
	</ul>
	<script type="text/javascript">
	<!--
		Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' });
	// -->
	</script>
</td>


1.6:

HTML Code
1
2
3
4
5
6
7
8
9
10
<td align="center" class="{$bgcolor}{$thread_type_class}" id="rating_table_{$thread['tid']}" style="{$GLOBALS['threadfields']['xtcstyle_btc']}">
	<ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">
		<li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>
	</ul>
	<script type="text/javascript">
	<!--
		Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' });
	// -->
	</script>
</td>


That is the simple example. We can add more style properties for the thread if we want. Just modify it.



Attached File(s) Thumbnail(s)
   

11-24-2010 05:28 AM
Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #2
RE: Custom Thread Style
Ta for the write up RateU Tongue

My Blog
11-24-2010 09:37 AM
Find all posts by this user Quote this message in a reply
Skiilz Offline
Member
***
Posts: 198
Joined: Nov 2010
Post: #3
RE: Custom Thread Style
Thank you RateU. Great guide. Might do it for my Stickies Smile

[Image: 468x602b.png]
11-24-2010 10:13 AM
Find all posts by this user Quote this message in a reply
Imran Offline
Member
***
Posts: 204
Joined: Apr 2010
Post: #4
RE: Custom Thread Style
That's a must have feature. Thanks RateU Smile

[Image: logo.png]

[Image: twitter.png]
11-24-2010 04:39 PM
Visit this user's website Find all posts by this user Quote this message in a reply
1master1 Offline
Member
***
Posts: 232
Joined: Oct 2010
Post: #5
RE: Custom Thread Style
Simply superb. Smile

It would be nice if we have this for "important/sticky" threads and "announcements" threads sections
11-25-2010 10:44 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #6
RE: Custom Thread Style
I have a plan to do that.

11-26-2010 06:48 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #7
RE: Custom Thread Style
EDIT:
For the sticky thread, I think it is better to use this way:

(11-28-2010 02:46 PM)ZiNgA BuRgA Wrote:  For a single colour, it's probably easier just to define some class in the CSS, and have something like this in templates:

HTML Code
<tr class="sticky_thing_{$thread['sticky']}">

And some CSS like:

Code:
.sticky_thing_1 {
background-color: #FFF6BF;
}


Original post in post #8, by Yumi.

(This post was last modified: 11-29-2010 03:06 AM by RateU.)
11-28-2010 05:41 AM
Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #8
RE: Custom Thread Style
For a single colour, it's probably easier just to define some class in the CSS, and have something like this in templates:

HTML Code
<tr class="sticky_thing_{$thread['sticky']}">

And some CSS like:

Code:
.sticky_thing_1 {
background-color: #FFF6BF;
}


My Blog
11-28-2010 02:46 PM
Find all posts by this user Quote this message in a reply
Imran Offline
Member
***
Posts: 204
Joined: Apr 2010
Post: #9
RE: Custom Thread Style
Again Nice to see an sticky thread's tip. Thanks again.

[Image: logo.png]

[Image: twitter.png]
11-28-2010 03:05 PM
Visit this user's website Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #10
RE: Custom Thread Style
@ Yumi: Yeah, I think it is better, Yumi. Thanks for the tips. I've updated my post Smile

11-29-2010 03:05 AM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: