User Name: Password:
New User Registration
Moderator: toedder 
 BrainKing design

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


Messages per page:
List of discussion boards
You are not allowed to post messages to this board. Minimum level of membership required for posting on this board is Brain Knight.
Mode: Everyone can post
Search in posts:  

<< <   1 2 3 4   > >>
8. April 2007, 08:57:43
Fencer 
Subject: Re: Speed up game play
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.

7. April 2007, 23:25:17
coan.net 
Subject: Re: Speed up game play
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.

7. April 2007, 19:51:52
Fencer 
Subject: Re: Speed up game play
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.

7. April 2007, 18:44:27
coan.net 
Subject: Re: Speed up game play
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.

7. April 2007, 18:36:59
rod03801 
Subject: Re: Speed up game play
BIG BAD WOLF: I like all the "junk".

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

7. April 2007, 17:38:51
coan.net 
Subject: Re: Speed up game play
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.

7. April 2007, 17:13:07
ScrambledEggs 
Subject: Re: Speed up game play
kid_game_2001:
all i can say is good luck cause your going to need it!!!!

7. April 2007, 17:05:15
kid_game_2001 
Subject: Re: Speed up game play
"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

7. April 2007, 16:54:50
ScrambledEggs 
Subject: Re: Speed up game play
Modified by ScrambledEggs (7. April 2007, 16:55:44)
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

7. April 2007, 15:41:08
Fencer 
Subject: Re: Speed up game play
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.

7. April 2007, 14:35:30
coan.net 
Subject: Speed up game play
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....

6. April 2007, 18:35:00
coan.net 
Subject: Re: The Move button.
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

6. April 2007, 18:17:43
AbigailII 
Subject: The Move button.
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; }

6. April 2007, 15:45:34
AbigailII 
Subject: Re: Online image
Modified by AbigailII (6. April 2007, 15:46:42)
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>

6. April 2007, 10:16:55
Fencer 
Subject: Re: Online image
AbigailII: Yes, that could be done. I know there are some small sections which were not optimized for the new design yet.

6. April 2007, 01:53:09
AbigailII 
Subject: Online image
Modified by AbigailII (6. April 2007, 01:54:52)
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>

5. April 2007, 04:34:20
Mousetrap 
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!

4. April 2007, 19:00:36
coan.net 
Subject: Re: CSS file
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.

4. April 2007, 18:46:59
pauloaguia 
Subject: Re: CSS file
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?

4. April 2007, 18:44:07
Luke Skywalker 
Subject: Re: CSS file
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)

4. April 2007, 18:07:32
coan.net 
Subject: Re: CSS file
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.

4. April 2007, 18:00:55
pauloaguia 
Subject: Re: CSS file
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.

4. April 2007, 17:40:09
coan.net 
Subject: Re: CSS file
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?

4. April 2007, 17:06:41
pauloaguia 
Subject: Re: CSS file
Modified by pauloaguia (4. April 2007, 17:07:38)
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.

4. April 2007, 16:21:39
coan.net 
Subject: Re: CSS file
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.)

4. April 2007, 16:18:53
coan.net 
Subject: Re: CSS file
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....

4. April 2007, 16:15:29
coan.net 
Subject: Re: CSS file
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

4. April 2007, 15:37:40
coan.net 
Subject: Re: CSS file
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. :-)

4. April 2007, 10:38:36
pauloaguia 
Subject: Re: CSS file
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.

4. April 2007, 07:49:12
Fencer 
Subject: Re: CSS file
BIG BAD WOLF: Good one. But maybe you should rename the extension to .css, ccs is a typo.

4. April 2007, 05:00:21
coan.net 
Subject: CSS file
Modified by coan.net (4. April 2007, 18:17:49)
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.

3. April 2007, 15:51:59
pauloaguia 
Subject: Re: Pages with Tabs
Fencer: Thank you

3. April 2007, 14:26:07
Fencer 
Subject: Re: Pages with Tabs
pauloaguia: It is done.

3. April 2007, 13:27:48
pauloaguia 
Subject: Pages with Tabs
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.

2. April 2007, 20:09:40
Fencer 
Subject: Re:
Gordon Shumway: Yes, I know. The strategy is still being formulated. But I don't think there would be many changes to the CSS structure in the future.

2. April 2007, 19:50:32
toedder 
Subject: Re:
Fencer: Great :)

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.

2. April 2007, 15:44:16
Hrqls 
Subject: Re:
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 :)

2. April 2007, 15:24:58
Fencer 
Subject: Re: Encapsulation of items.
AbigailII: It is done.

2. April 2007, 15:24:36
Fencer 
Subject: Re:
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.

2. April 2007, 15:16:37
toedder 
Subject: Re:
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?

2. April 2007, 13:22:03
Fencer 
Subject: Re:
AbigailII: I don't keep this statistics and I don't it's worth analyzing the server access log files.

2. April 2007, 13:13:06
AbigailII 
Subject: Re:
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.

2. April 2007, 13:04:22
rabbitoid 
Subject: Re:
Fencer: good, I like being in the minority :)

2. April 2007, 12:59:39
Fencer 
Subject: Re:
rabbitoid: Users who have been active in last 14 days.

Castle: 3572
Simple: 553
No fonts: 334

2. April 2007, 12:47:39
Hrqls 
Subject: Re:
Gordon Shumway: well done! thanks!
(quite fast as well :))

please announce it on the brainking.com board as well

1. April 2007, 16:22:22
toedder 
Subject: Re:
Fencer, MadMonkey: Thank you

31. March 2007, 08:35:10
Fencer 
Subject: Re:
rabbitoid: I will generate it when I am back.

31. March 2007, 07:18:57
rabbitoid 
Subject: Re:
Fencer: could we have somewhere stats of users of the diverse styles?

Active users only, of course. No point having the 40000 ghosts of brainking as users of the default castle style :)

30. March 2007, 21:39:36
Fencer 
Subject: Re:
Gordon Shumway: Good work.

30. March 2007, 13:29:17
MadMonkey 
Subject: Re:
Gordon Shumway: I am trying it now, it bring back memories lol

Seriously, its very good

<< <   1 2 3 4   > >>
Date and time
Friends online
Favourite boards
Fellowships
Tip of the day
Copyright © 2002 - 2024 Filip Rachunek, all rights reserved.
Back to the top