coan.net: I've suggested before that Fencer makes a tiny change: wrap the entire body of the page in a single <DIV> which has a class that corresponds with the game.

So you'd have:

<DIV class = 'Dice Poker'>
<DIV class = 'Froglet'>
<DIV class = 'MiniShogi'>

etc.

You cannot do if-then statements in CSS. CSS isn't a programming language - there are just declarations.

<rant>
Now, if the world would have gone DSSSL (which was there, working, well-tested and with a mature spec before the masses even knew about the web), you could have. DSSSL is Turing complete.

But the webguys suffer from NIH, and ability. So we have XML and CSS instead of SGML and DSSSL.
</rant>

pauloaguia: Actually, style sheets do override the default settings of the browser - that's what style sheets are for.

As for a user disabling the default setting, well, certainly that user made a deliberate choice. Sounds like a compelling reason to not override it.

pauloaguia: I don't understand. By all means, the default should be user driven (aka, the browser) instead of site driven. Browsers have highlighted links ever since there were browsers - and it's highly recommended by the HTML standards that browsers do so. Links being highlighted is one of the few things that browsers actually agree on.

There's no need to have a style sheet highlight links by default because you cannot trust the browser.

Fencer: You are right, I don't expect you to do it. It wouldn't be hard to code though, and I would have some use for it (for instance, setting the action to "stay here" for Battleboats, Frog Finder and Logic).

I do have a request though (not a JavaScript one). Sometimes I try something out in my CSS file, and it works great on the page I intend the effect for. But another page uses the same class names and there the effect is a disaster. Would it be possible to put the entire page inside a large DIV section whose class reflects the pagetype, and ID a further specification? For instance:

  <div class = 'Board' id = '136'>
  ... BrainKing design board ...
  </div>

  <div class = 'Board' id = '130'>
  ... Dice poker board ...
  </div>

  <div class = 'ShowGame' id = '26'>
  ... Some Backgammon race game ...
  </div>

You might even want to throw in the language in a lang attribute.

BIG BAD WOLF: I don't think it can be done with a (CSS) style sheet. Now, if only we could inject javascript.... I think it's possible with some javascript.

I'm trying to use CSS to make the pages as minimal as possible. Here are some tricks I'm using:

/* Since we have a custom style sheet, we can't switch anyway */
div#style-switcher                { display: none }
div#set-style-result              { display: none }

/* No need to remind me that I'm cloaked */
div[class="spacer cecko"]         { display: none }

/* Images in posting really mess up the formatting - get rid of them */
img[class~="post-icon"]           { display: none }

/* Am a member to 2010, won't use the bonus for a while */
img[src="/images/smileys/28.gif"] { display: none }

/* I don't care who's online */
img[src="/images/online.gif"]                         { display: none }
div#user-games-section>div[style="float: right;"]     { display: none }
div#opponent-games-section>div[style="float: right;"] { display: none }

/* There are always waiting games and tournaments anyway */
/* so why display the number? */
td.menutd a[href=WaitingGames]+span.rednumber { display:    none }
td.menutd a[href=Tournaments]+span.rednumber  { display:    none }

/* Left hide side links I never use */
td.menutd a[href=Friends]                     { display:    none }
td.menutd a[href=Enemies]                     { display:    none }
td.menutd a[href="PlayerList?a=ap"]           { display:    none }

/* Make the left hide side column smaller */
#menu-column { background: #e0e0e0; margin-bottom: 10px; padding: 6px; } /* Outcomment original line */
td.menutd                                     { font-size:  80% }

volant: Not necessarely. Most browsers will happely use a 'file:' URL, meaning you could store the CSS file locally. For instance: file:///home/abigail/Styles/bk.css

Here's a CSS trick to move the "move" button to the top right position of the window (it will stay there, even if you scroll):

input[value="    Move    "]       { position: fixed; top: 0px; right: 0px; }

Fencer: Thank you.

I have a couple of more requests:

• 
  Give all the smileys class; preferably a class indicating a smiley, and a
  class indicating which smiley it is. That enables people do something with
  all smileys, or with specific ones. For instance:
  <img src="/images/smileys/1116.gif" class = "smiley smiley1116">
  
  
• 
  Give the entries in the left hand column ('Main Page', 'New game', etc)
  different ids, so you can CSS to ignore the ones you don't use.
  
  
• 
  In boards, can there be a class for the subject? Also for the
  'show this user posts | show thread | link' part. The latter is inside
  a div with class 'spacer to-right', but that doesn't seem be significant
  enough to refer to this line.
  
  The board postings have many elements (icon indicating membership, name,
  envelope, board, hide link, date, subject, etc, etc) - ideal would be to
  have distinctive classes for each element.
  
  
• 
  It would be nice if the list of boards on the right hand side had classes
  indicating whether the board has new notes on it or not.
  
  For instance:
  

  
  <a href="Board?bc=136" title="English" class="lang">
  <span class = "new-nodes">BrainKing design</span></a>
  <span class="rednumber">(1 new)</span>
  

  
  
  Then one can write CSS like:
  

  
      span.new-node   {  color: #ff0000 }
      span.rednumber  {  display: none }
  

  
  And have boards with new nodes show up in red, without the number.
  If there's also a class indicating no new nodes one could even write
  some CSS that only lists the boards with new nodes.
  </ul>

Could the image indicating an on-line opponent and its following nbsp (<img src=/images/online.gif> ) be put in a span with a decidated class? For instance:

  <span class = 'online-indicator'><img src='/images/online.gif'>&nbsp;</span>

Fencer: I wonder how many of those 3572 castle users have no idea you can change style (since castle is the default). Did you keep statistics of which styles people used in the past? If so, one can figure out how many of the castle users have actually tried out the other styles.

I'm looking at having certain items in the right hide side column to be hidden. For instance, if you don't bother with labelling people, you will never have any friends that can be online, and you may want the 'Friends online' box in the RHS column to be hidden. But currently, this isn't easy to do - the box consists of a table with two rows. The class of the table is 'status-inner-space', but you cannot say "oh, I'll just set visibility for that class to hidden', because then other boxes will disappear as well. And while the 'Friends online' has a unique class ("status-friends-header"), the following 'none' is in the class ("menu-section"), which isn't unique either. Even '.status-inner-space.menu-section' isn't unique.

It would be useful if the tables forming the boxes in the RHS column (Date and time, Friends online, Favourite boards, Fellowships, Tip of the day) were inside DIV elements with unique class or id names.

Well, I know CSS, but how do I get BrainKing to use my CSS? Unfortunally, my browser doesn't have an option to insert a user supplied style sheet in addition to the document supplied style sheet.