Custom Thread Style

[RateU]

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.

[ZiNgA BuRgA]

Ta for the write up RateU

[Skiilz]

Thank you RateU. Great guide. Might do it for my Stickies

[Imran]

That's a must have feature. Thanks RateU

[1master1]

Simply superb.

It would be nice if we have this for "important/sticky" threads and "announcements" threads sections

[RateU]

I have a plan to do that.

[RateU]

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.

[ZiNgA BuRgA]

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

---

[Imran]

Again Nice to see an sticky thread's tip. Thanks again.

[RateU]

@ Yumi: Yeah, I think it is better, Yumi. Thanks for the tips. I've updated my post