My CSS Mission

[MarcLister]

Don't know if many of you frequent SI Games' (of Football Manager fame) forum but I'm fed up with the main page. SI recently upgraded their forums to use the same vBulletin forum base as BD. With SIF (my little abbreviation for SI Forums ) I can minimise some of the some forums I don't wish to see, to try and save some screen space.

Now this is OK when I don't want any of the options from a particular sub-forum, such as the Football Manager Live (online version of FM) or the Football Manager local language forums. Then there is the NHL Eastside Hockey Manager. Each of these sub-forums can be "hidden" by clicking/pressing the arrow on the right of each sub-forum's title bar.

But my problem is the sub-forums I am interested with, that have lots of links I don't want to see but I can't hide them because I'd not be able to see the links I do need. The main Football Manager forums section is the perfect example of this, I want to be able to see the PC/Mac General Discussion but not the Xbox360, Handheld equivalents or the Translation forum. With their old forum each item I wanted to hide had an unique ID so I could just knock up a CSS file on my PC and hide each item I wanted rid of. But with vBulletin nothing appears to have an ID, just a class. So by hiding a class I'd hide everything. Not what I want.

What I do want is to have a CSS file that somehow hides specific sub-forums for me to clean up the appearance of the forum. I know I could just bookmark each forum I want and use a shortcut to easily reach them but (A) where's the fun in that? and (B) I'd like to just bookmark the main page and then visit the forums I'm interested by looking at the latest posts in each, something I can't do if I just go into each forum looking for new posts.

Something tells me I'd need to tell Opera to block the entire CSS rules that the SI Forums uses and create my own to completely overwrite it? So I'd have to re-use the CSS that styles the links etc but then add my own CSS rules to hide the forums I don't want? I can't see how I can get the SI Forums CSS to work in a sort of partnership with mine.

Can anyone give me any advice on this? Like is it possible or should I find an easier or more physically possible project?

[NokkonWud]

Could you not add a link to the toolbar of your browser such as Firefox that ONLY has links to the pages you want to see?

[kaiowas]

Knock up your own version of the main page which only links to the subforums you want, store it locally and have your favorites point to that.

/EDIT - scratch that, just been and looked and each forum has an id in one of the td tags ie:

<td class="alt1Active" align="left" id="f119">

Your css should be able to use that pick up on individual forums and hide them.

[kaiowas]

Right, was a bit trickier than I thought due to not being able to grab the parent 'tr' element so I had to deal with each 'td' individually, then there was the added hassle that I couldn't find a way to grab the first column of a specific row (which contains the forum icon). This is the best I could come up with, unfortunately I had to mess with the padding for the whole of the first column so the rows you want to keep get affected a bit too but it's not too bad:

td.alt2{padding:0px}
#forum_statusicon_28, td#f28, td#f28 + td, td#f28 + td + td, td#f28 + td + td + td {display:none}

You only need the first row once, then repeat the second row for each forum you want to hide.

[MarcLister]

Originally Posted by NokkonWud

Could you not add a link to the toolbar of your browser such as Firefox that ONLY has links to the pages you want to see?

Isn't that just an arty-farty, BD-er way of doing:

I know I could just bookmark each forum I want and use a shortcut to easily reach them

??

Originally Posted by kaiowas

Knock up your own version of the main page which only links to the subforums you want, store it locally and have your favorites point to that.

/EDIT - scratch that, just been and looked and each forum has an id in one of the td tags ie:

<td class="alt1Active" align="left" id="f119">

Your css should be able to use that pick up on individual forums and hide them.

Originally Posted by kaiowas

Right, was a bit trickier than I thought due to not being able to grab the parent 'tr' element so I had to deal with each 'td' individually, then there was the added hassle that I couldn't find a way to grab the first column of a specific row (which contains the forum icon). This is the best I could come up with, unfortunately I had to mess with the padding for the whole of the first column so the rows you want to keep get affected a bit too but it's not too bad:

td.alt2{padding:0px}
#forum_statusicon_28, td#f28, td#f28 + td, td#f28 + td + td, td#f28 + td + td + td {display:none}

You only need the first row once, then repeat the second row for each forum you want to hide.

Wow, thank you very much sir! I'll play with that later on.

[NokkonWud]

It's a sensible, time saving way, yes .

[MarcLister]

Originally Posted by NokkonWud

It's a sensible, time saving way, yes .

Pfft! Sensible? Time saving? What planet are you from?!

[MarcLister]

kaiowas - Where did you get the #f28 from? Looking at the SI Forums with Firefox and the DOM inspector I can't see anything like that at all.

Balls! Just found one of them. I'll shut up in future!

[Feek]

Was I the only one expecting a CS:S thread?

[Desmo]

Yes