This is all new to me, but I started to play around in making my own CSS StyleSheet.

I made a lot of the colors the same as the "classic" look, but also made changes here and there that suits what I like. (for example I hide the quick style switcher on the top of every page - which moves the game page up a little more... or course not much, but it is a start.)

In case others would like to try out my style sheet, it is at:

http://coan.net/coannet.ccs


CORRECT LINK: http://coan.net/coannet.css

(the .ccs one is still there, but I will delete it soon - so if you are using this one, change to the CSS one!

If you decide to use it - just a warning that some things may still change - there are still some font sizes that I know I can change - and probable will so it is easier for me to read - I like to fit as much info on one page, but not too small that I can't read it. So I'll be playing.

QUESTION: One of the BIGGEST request that I have is to have a duplicate Submit button ABOVE the board when it is time to submit. (like right under the game name - near the top of the page) (with the original still below the board with the text boxes in case I want to write some notes and such)

Is there any way to do this with Style Sheets. I'm guessing no - but I know I do not know enough about the .CCS files to know for sure.

BIG BAD WOLF: Good one. But maybe you should rename the extension to .css, ccs is a typo.

BIG BAD WOLF: If that element has some sort of identifier (class or id) you can play around with absolute positioning tomake sure it displays on some area of the page. But you won't get a second button, you can only control how that only one will appear.

Fencer: I work for the Center for Children Services - which I always use CCS as a quick way of where I work..... so it is VERY easy for me to switch those letters around. :-)

pauloaguia: YEA! I figures out how to do it.

But problem - HEY FENCER - currently both the Submit & Cancel this move have the class="inputbutton"

So when I try to put the inputbutton in an absolute position on the page, all I see is the cancel button - since the submit is under it I believe.

It will be a pain to have the submit button near the top when i want to write a note, but it will be so much easier to play 99% of the game with scrolling!!!!!

I'm excited now - that is if I can get Fencer to define these 2 things differently.

Oh, and I found the following site VERY helpful in explaining some of the css stuff...... and it is another "brain" site:

http://www.brainjar.com

BIG BAD WOLF: Also, can I request that both the message for opponenet box & the notes box have different class names.

Currently, both are: class="inputbox"

Now that I know how to move things, I have an "ugly" idea of what to do....

Hum..... Just relized that is what all the input buttons & inputboxes are called - even on a discussion board and such.

So that means currently if I change it to look good on the game pages, it will mess up the discussion boards.

Fencer - any chance to have them called something different? Gameinput, discussioninput, etc.... (actually all I care about is changing the game page only.)

BIG BAD WOLF:
You can apply a style at 3 different levels:
1. tag level. Every tag of the matching type will have the defined style
2. class level. Every element specified as belonging to that class will have the defined style. In the CSS file these start with #
3. id level. The element with the specified id will have the defined style. In the CSS file these start with . (dot)

The buttons and text boxes should all have identical classes, since you want to render them identically (same colours, font, border, etc). In this particular case it's hard to do it at tag style because usually they all share the tag "input". What you want is to use the id of the submit button and add some more styling to it.

pauloaguia: Well here is what I see:

Submit button:

<input type="hidden" id="m" name="m" value="1131">
<input type="submit" id="submit" name="submit" value=" Move " class="inputbutton">

And to compare, the cable this move button:

<input type="hidden" id="g" name="g" value="2238994">
<input type="submit" id="submit" name="submit" value="Cancel this move" class="inputbutton">

I tried to add a .m { } to the css file, but it did not seem to work. I'm still playing around to figure it out, but is that what you are saying I need to do?

BIG BAD WOLF: It's not a .m{} you should be adding but a .submit{}. The input with id=m, is an hidden input, it's not shown anyway ;)

Apparently the id 'submit' is used on more than one button type (the Cancel this Move button). In that case, you'll either have to convince Fencer to use different ids for every button in the site or live with having every "submit" button at the top of the page.

pauloaguia: Well my problem is since both submit & cancel have the same - the cancel button is "bigger" and actually hides the submit button when I give it an absolute position.

Hopefully Fencer can change the submit button on the game pages to it's own name (all others can stay the same as far as I care) - then I can have my ultimate game page with the submit button near the top of every page - in the EXACT same position every time, letting me move my mouse there ready to hit submit while I wait for the page to load - instead of now waiting until the page loads, then hitting the scroll wheel on the mouse, then looking to make sure the button is on the page, then moving the mouse to the button, and then hope my mouse wheel was completely turned, and not just 1/2 way where it is about to shift the page as I get ready to click, then click the button. At least for me, clicking 1 spot on the page to submit every game just seems a lot easier.

And thanks for you help - me digging around and trying different things is the best way for me to learn how to do these css things.

BIG BAD WOLF: having multiple tags with the same id is wrong HTML anyway, maybe you can convince Fencer to correct that. You can also select on a value of an attribute, i think it is [attr="value"], e.g. [name="Submit"] (this is off the top of my head, check with a css reference)

Luke Skywalker: Right. I was just testing it with
input[value=" Jogar "] { position: absolute; top: 0; left: 150px; }
and it worked (using protuguese localization). However it looked sooo wrong. Why not move the whole "game-info-section" to the top?

pauloaguia: Actually I like top 50, left 25 - and it puts it right under the name for me - which will eliminated my need to scroll on any game page!!!! YEA!!!!

(well unless I need to either write a message to my opponent or a note - but I do that less then 1% of the games I play, so that is not much of an issue for me.

http://coan.net/coannet.css

Note about my css file - I'm making it for myself - with what looks good for me. Everyone is welcomed to use it, but don't be upset when you end up with a submit button near the top since I'm desiging it for myself... which of course everyone is free to check out and use themselves. And of course, I will still be editing and playing around with it for the next few weeks I'm sure.

Thanks Luke Skywalker & pauloaguia!!!!! That is what I wanted!

Of course the value is different for other languages, so I'm guessing that my css would not work for others using different languages (well at least the part in which I use the word Submit.

I have just altered my settings to show no columns on the game page, it is great! I read on here about it. Thanks very much!

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>

AbigailII: Yes, that could be done. I know there are some small sections which were not optimized for the new design yet.

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>

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

AbigailII: Ohh.... cool!

I put my submit button in the upper left (right under the game name) - and like it there, but I still have to scroll occasionally to type a message - (and out of habbit) so to have a fixed position - COOL.

will have to play with that later... when I have more time

What I thought about .css files was confirmed by someone on the Feature request board - that is even though the .css file can hide and keep things off the screen, it will not speed things up since the original page loading will still take place by the BrainKing system - and the .css file will just change the display and the rendered page before it hits the browser on our computer.

SO FENCER - A suggestion for you - a "Quick-play" game pages. (This is where all unnecessary information is removed from the game page.) So all the is left is:

Game name
Submit move right under game name to submit without scrolling.
Opponent name
IMPORTANT Game info (like captured pieces, Cube points, etc..)
Game Board
Message for opponent box
notes for self box
2nd submit button
draw/resign/delete links
Link back to main page
Link to switch back to "more info" game page


What is not needed to take loading time:
User Icons
User flags
User ratings
User graph link
User "what are they doing"
user last moved
Rules link
Brainrook.com links
no smileys link
no autosave is disable link
no switch to rich text editor link
no change message area size link
Discussion board links
Tournament info & link
Game ID
Time per move info
public game info
rated game info
layout info
board size info
Weekend day into
Automatic vacation info
User agreement, Brainking staff, etc... links

Again, this is not something I want to do by .css file alone - I'm not looking for just less clutter on the page - but what I'm looking for is faster loading game pages.

When users at one time were very easily being able to get 5,000+ moves a day - Fencer can say over and over there is not a speed issue, but something has to be changing. It's funny how I will play games on a few different sites, and when I play my games (for example) on DailyGammon - I end up staying on that tab and playing all my games at one time - why, because the page loads so fast, I don't even have time to switch to a different tab before I can make my next move. But for BrainKing, most times between page loads is at least .5 seconds to 2 seconds, with many longer then that. Well in my mind, if I'm waiting for a page to load - I might as well switch to another tab and play somewhere else while I wait.... making it harder to play games.

Anyway the point is lets have a very simple game page - 99.9% of the time, I could care less what tournament a game is attached to. 99.9% of the time I could care less on how my rating will change with a win/draw/loss. 99.9% of the time I could care less about writing a message or note, so why not put a second submit button near the top under game name. (I've done that with .css file but it's moved from below, so those .1% of the time I do have to type something, it is a pain without a second button.)

So again, this is about a different game page that Fencer needs to make - not a way to still wait for the system to process all the information on the page and then hide it with a .css file. Lets skip the whole process of waiting for the system to figure out what the rating change will be and such....

BIG BAD WOLF: Have you tried to calculate how many kilobytes you would save if the listed parts of the game pages were removed?
Not much, I can assure you. The biggest amount of transferred data is contained in the game board code itself and since it's the most important part of the page, it must stay there. If you experience a slower loading of the page, it is usually caused by other things which have nothing to do with BrainKing's visual layer.

BIG BAD WOLF: when im writing this ive been on here for 15 hours and only just managed over 2760 moves before Christmas i could do 1000 moves in 2 hours and there has only been one person who has actually made it over 3000 since Christmas
and not more than a handfull over 2000 moves

"Snoopy": Do you mean the 3104 moves I made on January 29, of this year? I don't know of anyone else it could be.

Not trying to go off topic, but within the next week I may aim to beat that record. I was thinking of pulling an all nighter on brainking and just skip sleep. Get on at 6pm when it resets and stay on probably til 9 am for some sleep. or not. I might just try that tonight

kid_game_2001:
all i can say is good luck cause your going to need it!!!!

Fencer: Yea, but how much time does it take the system to calculate the rating change before it can be displayed on the game page? Yea, the text itself isn't much at all - but does your system calculate it when the page is called for or in advance?

How about the "Score of finished games" between 2 players? Does your system calculate and look at the past games between 2 players to calculate that information on every page load, or is it calculated in advance?

If the answer to both of those is in advance, then it may not be the problem.

But if my browser request a page - the request goes to your system, it first has to calculate BKR change, then it has to do a look up on games to get results of past games between 2 players and such, then it makes up the code for the page and sends it off for my browser to interpret - then that is extra time your system takes in giving me back the game - with a lot of useless information I personally don't use 99.9% of the time.

But again, I don't know how your system gets some of those stats - but something is wrong somewhere if so many people are seeing speed issues..... I'm just trying to help figure out what - and getting rid of extra junk on the page is just one way I can think of.

BIG BAD WOLF: I like all the "junk".

I'm sure you are asking for an option, though.

rod03801: Oh yes, an option. Occasionally the information is also useful to me. An option for "quick play" page without having to calculate all the extra junk is what I want.

BIG BAD WOLF: To calculate the BKR change takes several milliseconds and the majority of other information on the game pages is pre-cached in the BK allocated memory, so there are almost no database queries at all. As I have said, the lookups are very optimized and usually eat only a fraction of the whole request-response time.

Fencer: OK then, why is the site slower to many user then? (compared to how fast it use to be.) My only idea is to make a page with the bare minimum to play games and see if that helps.

BIG BAD WOLF: The site will be always slower for some users, especially for those who start more than 1000 games at once, no matter if they like it or not. And this issue does not belong to the design board.

Fencer: Ok then... since I can't talk about the reason for this request, I will just go back to the request itself.

Is it possible to have an option to have a game page with just the very minimal stuff loaded on it (like requested below)?

BIG BAD WOLF: Yes, that would be possible.

Some css files people can use if they want.

Here is my main one: http://coan.net/coannet.css

You will find classic colors, move button at top left of page (good if you do not have the left menu showing on game board), along with some font changes here and there to help the eyes.

Here is a new one: http://coan.net/coannet2.css

Basicely the same as the above, but the move button is moved more towards the middle of the page - so if you have the left menu column showing on the game page, it will not mess that up. (Now it will still show over the top of game messages & game notes - but it's the best I can do right now.)

So...I'm VERY new to this...where can I get the Style Sheet that BK uses (for castle design)? I just want to make some minor changes.

BIG BAD WOLF: Are you still going to use Abigaill's suggestion to have the move button stay "fixed" at the top, even when you do scroll? (I use yours all the time now, and love it! I will try out the 2nd one now, since I do use the left column, and would prefer the move button moved to the right some..)

rod03801: Oh yea... I forgot all about that "fixed" submit button.

I have done that to both of mine - so now when you scroll the page, it stays on the same part of the screen - VERY cool! (Thanks Abigaill!)

Summertop:

No Fonts: http://brainking.com/css/nofonts-37.css
Castle: http://brainking.com/css/castle-37.css
Simple: http://brainking.com/css/simple-37.css

rod03801: What is really cool is I just have 4 Ludo games in a row where I did not have a move - and took me about 4 seconds total to hit submit 4 times (once for each game) without having to move the mouse - or scroll down the page and search for th submit button before hitting submit.

Having the submit button near the top is GREAT

BIG BAD WOLF: If I understand correctly to do this you have to have a place to host your css version. Do you know of anywhere this could be done for free just to give it a try?

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

AbigailII: thank you.

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

BIG BAD WOLF: I have been using yours for a couple of days now on and off. I must say its great, well done to you
I guess you still have a bit of tweaking to do, but i love the Move button at the top & it never moves if you scroll down which is well cool lol

A suggestion I have made a few times which will help speed up playing the game of Dice Poker - along with helping to make fewer mistakes while playing the game - that is the ability to click on the dice which will also check (and uncheck) the checkbox under the dice.

Well I have a feeling it probable won't be done on the system - so I'm now trying to figure out if I can make this possible using the .css file.

OK Smart css people - I NEED YOUR HELP!

Here is a same source code from the Dice Poker Game:
-------------------------------------------------------

<form action="DoMove" method="post" id="rollDiceForm" name="rollDiceForm"><table align=center><tr valign="bottom">

<td align="center"><img>
<input type="checkbox" id="coch0" name="coch0" value="1" class="coch"></td>

<td align="center"><img>
<input type="checkbox" id="coch1" name="coch1" value="1" class="coch"></td>

<td align="center"><img>
<input type="checkbox" id="coch2" name="coch2" value="1" class="coch"></td>

<td align="center"><img>
<input type="checkbox" id="coch3" name="coch3" value="1" class="coch"></td>

<td align="center"><img>
<input type="checkbox" id="coch4" name="coch4" value="1" class="coch"></td>

<td><input type="submit" id="rd" name="rd" value="Roll selected dice" class="inputbutton">


Rolls left: 2
<input type="checkbox" id="seal" name="seal" value="1" id="seal" onClick="selectAll(false);"> Select All</td></tr></table>

-------------------------------------------------------

Before I posted that I thought it would be possible since I seen each checkbox has it's own name - but now that I copied the above, I'm not sure if it is possible since the name of the image is the same... but I'll leave it here - maybe some smart people will be able to toss out some ideas.

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.

AbigailII: I hope you don't expect me to allow a JavaScript injection.

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.

Why aren't links highlighted in some way? (Underline and/or bright blue color are common ways).
As it is now, if it wasn't for most browsers coming with a "underline links" option or "use browser's links colors" set by default, lots of people would fail to see links all over the site.

I've actually grown used to such a clean look. For instance, the menu on the left is almost crying out to be clicked so this comment doesn't really apply to it. Same with the "options" in the message box, for instance, (show thread, link, etc) since they are isolated enough.
But for links inside posts there really should be some sort of highlight other than the one forced by someone's browser (I always liked the blue color, no underline style... seems "Simple" enough ).

So I'd like to suggest that the A tag be hilghlited in some way, by default. This setting could be overriden for some classes, where it is not so needed (like the menu, for the reasons stated).

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.

AbigailII: But it is. Defining it in the stylesheet, by no means overrides the default settings browsers have of underlining it or whatever. But if a user disables that default, suddenly the site doesn't show any links (I know many people who actually do this - Google, for instance looks so much cleaner without all those underlines...).

And anyway, it is already imposing. On the left menu all my links show up underlined (using browser's defaults). On the right none of them do, because the corresponding style specified text-decoration:none. Adding a a{text-decoration:underline;} rule (or color:blue; or whatever) would keep the links on the right menu still not underlined but would make sure links in the middle of a post somehwere do not go by unnoticed...