How do I change Thread \ Subforum category stripes?
 

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?

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.

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.

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

Caused by text-indent.

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.

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 { ?

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?

Don't think i've missed anything, could it be the position of the CSS?

I've pretty much followed the instructions above

Throwing in a
after each of your backgrounds should fix your problem.

Awesome, thanks so much guys :up:

Is there any way to completely remove the category text which is now on the right hand side? And the collapse expand? I dont like how it looks now with them there :(

Really sorry to keep asking stuff.

Look at the template
forumhome_forumbit_level1_nopost under Forum Display Templates.

The html should be pretty straightforward

You've missed out adding the .tcat_text_title CSS part, I can see by looking at your source code.

^ Although you could do the above, -1000 pixels isn't nearly enough to take something off a screen, especially when its aligned to almost the very right.. Screens now can be commonly larger than 1600 px wide. If you're going to text-indent, make it around -9999 just to be sure.

Yes I took that out and used text-align: right after each image. The .tcat_text_title seemed to remove my images from the strip altogether and revert back to the default strip :confused:

Right, from what you currently have, follow these instructions and it will work fine:

1. To the CSS add:

.tcat_tex_title {
visibility:hidden;
}

2. From:

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

Remove the 'text-indent: -4000px;'. Repeat this step for the other tcats_text_<id> CSS decelerations.