Learn how to customize BrainKing's view layer and share your CSS experiences.
Useful links Wikipedia - for general information on what CSS is, why it is useful, and a short introduction on how to use it. W3Schools - for a tutorial and a reference on CSS. W3C - for detailed and advanced information for those who are interested. CSS Zen Garden - for some trickery and demonstration of what is possible with CSS
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, 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: 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.
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.
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.
"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
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
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.
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....
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
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.
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'> </span>
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.
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.
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?
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)
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: 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.
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: 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.
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.)
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:
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. :-)
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.
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:
(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.
But I don't think there would be many changes to the CSS structure in the future. Well, here's a request for a small change :
On pages with "tabs" (like Profile, Settings or Statistics), could there be a class for the unselected tabs? And while I'm at it, could the select tab be anything other than "shadow-table"? And to really push it, could the options be DIV's instead of TD's?
Each of these options would help me make it nicer, but at least the first one would be very welcomed.
I have a question about that: How will styles be maintained?
I tested mine with all 3 browsers you mentioned, and it seemed to work as intended on all of them. But today, you made some - reasonable - changes to the right hand column, which caused the text-align to be converted to center. I didn't understand it, but fixed it immediately. This was pretty easy because I still have direct access to my stylesheet and the changes are immediately available to everybody who uses the sheet. But if the style was hosted on BrainKing.com without me having access to it, such changes would have been made by you, meaning you had to check out every page in every style to be sure they all still work.
This seems to lead to the conclusion that the best would be to have some authoring system for stylesheets. In other words: that stylesheets, even after being included in the BrainKing style repository, would be maintained by either their author or some other maintainer.
Gordon Shumway: *nod* sounds logical .. i wont post the link on there either :) .. people interested will come to this board and find it here to test it and test their own preferences :)
Gordon Shumway: Yes, I do. When a style is finished and works with no problems on all major web browsers (Firefox, IE 7, Opera), I will add it to the BrainKing repository and everyone will be able to set it on the Settings page.
Hrqls: Thank you :) I was just about to do that, but I am not sure. I thought and think it would be better and more trustful to have those user styles hosted on BrainKing.com instead of having them cluttered over various third party sites. At least styles that were so commonly requested like the classic BK theme. Otherwise many people would rely on my little site for this style, and if I once forgot to pay my bills, it might even be gone .
I think the option to link to external styles is great for testing them, and even for introducing them to the crowd, discuss and perhaps alter them, according to the critics you might get. But I don't think it would be too smart to use this method permanently for including custom styles.
But in the end, this is Fencer's decision and perhaps he can lighten our minds up: Do you plan to include those user committed styles in another way than by linking to them, i.e. might there be more options in the settings?
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.