MyBB Hacks

MyBB Hacks > MyBB Plugins > XThreads > Custom Thread Style
Full Version: Custom Thread Style
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

RateU

11-24-2010, 05:28 AM
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 
<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 
<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 
<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 
<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

11-24-2010, 09:37 AM
Ta for the write up RateU Tongue

Skiilz

11-24-2010, 10:13 AM
Thank you RateU. Great guide. Might do it for my Stickies Smile

Imran

11-24-2010, 04:39 PM
That's a must have feature. Thanks RateU Smile

1master1

11-25-2010, 10:44 AM
Simply superb. Smile

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

RateU

11-26-2010, 06:48 AM
I have a plan to do that.

RateU

11-28-2010, 05:41 AM
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

11-28-2010, 02:46 PM
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

11-28-2010, 03:05 PM
Again Nice to see an sticky thread's tip. Thanks again.

RateU

11-29-2010, 03:05 AM
@ Yumi: Yeah, I think it is better, Yumi. Thanks for the tips. I've updated my post Smile
Pages: 1 2
MyBB Hacks > MyBB Plugins > XThreads > Custom Thread Style
Reference URL's