How do I change Thread \ Subforum category stripes?

[Yellow Slider]

I don't want them to be the same as they are on my index, I have different category stripes for threads and Subforums.

How do I change the exiting ones to the ones I made?

[CodingMonkey]

Are you talking about the stripe highlighted in my attachment?

If so, go to the Style Manager > Main CSS for the style you wish > search for .tcat
Within the .tcat box, you'll see info such as color codes and one color code with url( after it.
Change the contents of url( to match the path of your image.

So it'll end up being something like...
#FFFFFF url(http://mydomain.com/images/gradients_tcat.gif)
or just the url part.

[Yellow Slider]

Originally Posted by CodingMonkey

Are you talking about the stripe highlighted in my attachment?

If so, go to the Style Manager > Main CSS for the style you wish > search for .tcat
Within the .tcat box, you'll see info such as color codes and one color code with url( after it.
Change the contents of url( to match the path of your image.

So it'll end up being something like...
#FFFFFF url(http://mydomain.com/images/gradients_tcat.gif)
or just the url part.

I was talking about the category stripes, but not on the one that we have inside a forum or on the main index, I'm talking about the stripes inside threads, I want to use a different picture in the category stripes inside a thread.

thanks.

[Pokerbanter]

Originally Posted by CodingMonkey

Are you talking about the stripe highlighted in my attachment?

If so, go to the Style Manager > Main CSS for the style you wish > search for .tcat
Within the .tcat box, you'll see info such as color codes and one color code with url( after it.
Change the contents of url( to match the path of your image.

So it'll end up being something like...
#FFFFFF url(http://mydomain.com/images/gradients_tcat.gif)
or just the url part.

Sorry but i'm going to hijack this thread :erm:

What i'm looking to do is what you have provided a suggestion for.

I have made some images to replace the category strips. So one for Welcome, General Discussion etc etc. I don't want a generic image for each strip as I have text for each category in each individual image. I have already tried what you suggested as you can see...

www.new.pokerbanter.com/forum

A couple of issues.... It is repeating the image for each category which is what i would expect it to do after this change, but how do I have a seperate image for each forum category??

Also, you can see that the text of the forum still exists, how do you remove this??

ANy assistance appreciated.

[Xoligy]

There's no way to do this with just CSS. The best way is to give it another class of tcat_text_$forumid and then change the background image in the CSS. So open the templatebit "forumhome_forumbit_level1_nopost" and find this:

<td class="tcat"

Then change it to:

<td class="tcat tcat_text_$forumid"

Then, in your CSS in the "Additional CSS Definitions" area add the following:

.tcat_text_18 {
background: #990000 url(images/icons/pbcategorybggen.jpg) no-repeat;
text-indent: -1000px;
}

Then do the same to the CSS for the other forums (just change '18' to the forum ID which you can find by hovering your mouse over the link and looking for &f=<id>). This is just off my head so it may need tweaking a little.

[Pokerbanter]

Originally Posted by Xoligy

There's no way to do this with just CSS. The best way is to give it another class of tcat_text_$forumid and then change the background image in the CSS. So open the templatebit "forumhome_forumbit_level1_nopost" and find this:

<td class="tcat"

Then change it to:

<td class="tcat tcat_text_$forumid"

Then, in your CSS in the "Additional CSS Definitions" area add the following:

.tcat_text_18 {
background: #990000 url(images/icons/pbcategorybggen.jpg) no-repeat;
text-indent: -1000px;
}

Then do the same to the CSS for the other forums (just change '18' to the forum ID which you can find by hovering your mouse over the link and looking for &f=<id>). This is just off my head so it may need tweaking a little.

Thank you very much, that worked a treat!

One small question though, after doing this I find the collapse/expand button has moved to the left and outside the body, any ideas?

Here is the new code in forumbit_level1_nopost

<tbody>
<tr>
<td class="tcat tcat_text_$forumid" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
<if condition="$childforumbits">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
</if>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
$childforumbits
</tbody>
</if>


And the additional CSS:

/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

.tcat_text_18 {
background: #990000 url(images/misc/pbcatgen.jpg) no-repeat;
text-indent: -1000px;
}

.tcat_text_1 {
background: #990000 url(images/misc/pbcatwelcome.jpg) no-repeat;
text-indent: -1000px;
}

.tcat_text_7 {
background: #990000 url(images/misc/pbcatTBZ.jpg) no-repeat;
text-indent: -1000px;
}

.tcat_text_13 {
background: #990000 url(images/misc/pbcatpoker.jpg) no-repeat;
text-indent: -1000px;
}

.tcat_text_20 {
background: #990000 url(images/misc/pbcatbitofbant.jpg) no-repeat;
text-indent: -1000px;
}

[Bellardia]

Caused by text-indent.

[Xoligy]

Ah yes, sorry I didn't think of that. In that case, change:

<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>

With:

<div class="tcat_text_title">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
</div>

And then in the CSS add:

.tcat_text_title {
text-indent: -1000px;
}

Then remove the text-indent: -1000px; from the tcat_text_18 etc.

[Pokerbanter]

Woah, that seems to have put the collapse button back where it was on the right but now my strips aren't showing. Do I add .tcat_text_title at the end of the CSS? Or before .tcat_text_18 { ?

[Bellardia]

CSS further down the document should have precedence over those that are near the top of the file. So by that, you'd want the overlapping style as far down as you can just in case

Are you sure you didn't miss anything?