Active Topic Color Change?

In my Active Topic listing, I'd like a certain category of postings to have a different background color.

Can anyone give me an assist on how to begin this?

BACKGROUND:
I have a Category with about 6 forums in it that is only open to "members" only. So when a posting from this Category shows up under Active Topics, I'd like it to be immediately obvious (with a different background color).

In templates/default/activetopics.tpl find:

Code

<tr>
	<td class="{$topics[row].color}" valign="top">
		<a href="{ubb url="ubb=postlist&Board=`$topics[row].forum_id`" title=$topics[row].forum_title}">{$topics[row].forum_title}</a>
	</td>
	<td class="{$topics[row].color}" valign="top">
		<img src="{$config.BASE_URL}/images/{$style_array.icons}/{$topics[row].post_icon}" alt="" />
	</td>
	<td class="{$topics[row].color}" valign="top">
		<div {$topics[row].tool_tip}>
			{if $topics[row].gonew}
			<a href="{ubb url="ubb=show`$display`&topic=`$topics[row].topic_id`&gonew=1#UNREAD"}"><img src="{$config.BASE_URL}/images/{$style_array.general}/gotonew.gif" alt="{$lang.JUMP_NEW}" title="{$lang.JUMP_NEW}" /></a>
			{/if}
			<a href="{ubb url="ubb=show`$display`&Number=`$topics[row].post_id`#Post`$topics[row].post_id`" title=$topics[row].post_subject}">{$topics[row].post_subject}</a>
			{$lang.TEXT_BY} {$topics[row].poster_name}
			@ {$topics[row].post_time}<br />
		</div>
		<br />
		<span name="body[{$topics[row].row}]" style="display:block">{$topics[row].post_body}</span>
	</td>
</tr>

Replace With:

Code

{if $topics[row].forum_id eq '15'}
<tr>
	<td class="{$topics[row].color}_special" valign="top">
		<a href="{ubb url="ubb=postlist&Board=`$topics[row].forum_id`" title=$topics[row].forum_title}">{$topics[row].forum_title}</a>
	</td>
	<td class="{$topics[row].color}_special" valign="top">
		<img src="{$config.BASE_URL}/images/{$style_array.icons}/{$topics[row].post_icon}" alt="" />
	</td>
	<td class="{$topics[row].color}_special" valign="top">
		<div {$topics[row].tool_tip}>
			{if $topics[row].gonew}
			<a href="{ubb url="ubb=show`$display`&topic=`$topics[row].topic_id`&gonew=1#UNREAD"}"><img src="{$config.BASE_URL}/images/{$style_array.general}/gotonew.gif" alt="{$lang.JUMP_NEW}" title="{$lang.JUMP_NEW}" /></a>
			{/if}
			<a href="{ubb url="ubb=show`$display`&Number=`$topics[row].post_id`#Post`$topics[row].post_id`" title=$topics[row].post_subject}">{$topics[row].post_subject}</a>
			{$lang.TEXT_BY} {$topics[row].poster_name}
			@ {$topics[row].post_time}<br />
		</div>
		<br />
		<span name="body[{$topics[row].row}]" style="display:block">{$topics[row].post_body}</span>
	</td>
</tr>
{else}
<tr>
	<td class="{$topics[row].color}" valign="top">
		<a href="{ubb url="ubb=postlist&Board=`$topics[row].forum_id`" title=$topics[row].forum_title}">{$topics[row].forum_title}</a>
	</td>
	<td class="{$topics[row].color}" valign="top">
		<img src="{$config.BASE_URL}/images/{$style_array.icons}/{$topics[row].post_icon}" alt="" />
	</td>
	<td class="{$topics[row].color}" valign="top">
		<div {$topics[row].tool_tip}>
			{if $topics[row].gonew}
			<a href="{ubb url="ubb=show`$display`&topic=`$topics[row].topic_id`&gonew=1#UNREAD"}"><img src="{$config.BASE_URL}/images/{$style_array.general}/gotonew.gif" alt="{$lang.JUMP_NEW}" title="{$lang.JUMP_NEW}" /></a>
			{/if}
			<a href="{ubb url="ubb=show`$display`&Number=`$topics[row].post_id`#Post`$topics[row].post_id`" title=$topics[row].post_subject}">{$topics[row].post_subject}</a>
			{$lang.TEXT_BY} {$topics[row].poster_name}
			@ {$topics[row].post_time}<br />
		</div>
		<br />
		<span name="body[{$topics[row].row}]" style="display:block">{$topics[row].post_body}</span>
	</td>
</tr>
{/if}

Replace '15' with the id of the special forum. For more than one forum you can adjust to the following and adapt accordingly:

Code

{if $topics[row].forum_id eq '15' || $topics[row].forum_id eq '23'}

You'll need to add an "extra" css of:

Code

.topicsubject_special {
}
.alt-topicsubject_special {
}
.new-topicsubject_special {
}
.new-alt-topicsubject_special {
}

You may have to add linking classes as:

Code

.topicsubject_special {
}
.topicsubject_special a:link {
}
.topicsubject_special a:visited {
}
.topicsubject_special a:active {
}
.alt-topicsubject_special {
}
.alt-topicsubject_special a:link {
}
.alt-topicsubject_special a:visited {
}
.alt-topicsubject_special a:active {
}
.new-topicsubject_special {
}
.new-topicsubject_special a:link {
}
.new-topicsubject_special a:visited {
}
.new-topicsubject_special a:active {
}
.new-alt-topicsubject_special {
}
.new-alt-topicsubject_special a:link {
}
.new-alt-topicsubject_special a:visited {
}
.new-alt-topicsubject_special a:active {
}

There, last edit...

Gizmo, this is fantastic. It hits right at the improvement that I've wanted to upgrade for a long time.

Now, maybe I didn't tweak it correctly, but this screen view shows a couple of issues.

1. The Forum names are missing. It says ARRAY instead.

2. Some of the formatting is lost (cell outlines and link colors).

3. Lastly, should I have added the "linking classes" to the common.css file?

[Linked Image]

Many thanks for getting me this far.

#1 shouldn't happen, we aren't mucking with the array, just appending to links when the forum I'd is matched... Though this was made on 7.5.7 so it could need adjusting for past versions...

#2 did you add the style updates for linking at the bottom of the post?

#3 see the "extra" section of the style editor

Well, here it is morning and the ARRAY link is still showing.

Now, I'm not 100% sure, but I "THINK" that the "array" text didn't show up until I added the new version of activetopics.tpl.

I only modifed and added two files:
activetopics.tpl and
main.css

And I've now added both of the original files back to the Forum. But it still shows the "ARRAY" wording.

Oh, just reread your post -- I haven't updated to 7.5.7 yet.
Was thinking of doing it today. Maybe that's the solution??

Any idea why I may have lost the "presentation" of the link? If you mouse-over it, the link is active.

------------UPDATE------------
I just RE-SAVED the tpl again and then the ARRAY wording disappeared and went back to normal. That part is now working okay.

well the presentation of how the link works is because of the

Code

a:link {
}
a:visited {
}
a:active {
}

lines; because of the way the styles are handled (all the different areas to adjust different style options for new posts, alternative coloring, etc) we have to make sure they all get updated for the "special" class too.

I think that I have it working good now... Will give it a more thorough check tomorrow and Sunday.

This appears to work EXACTLY the way that I wanted it to... very cool.

I hope that there's no "collateral" damage. :-)

There shouldn't be, it's simply changing the class of items in specific forums...

So far, so good. I only made a couple of simple CSS changes - the biggest being the background color. I've just modified it again, and it seems to be working very nicely. I have 9 different forums that all list in a differnt color.

Now... I might try to expand this some more, and introduce ANOTHER color (third) for yet a different forum. We'll see.

I really like this. Sorry that you can't see it, since you'd have to be logged in as a MEMBER in order for the different color to show.

Lol, sounds interesting actually; I'm glad that it worked out for you though.