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 Pawn.
Mode: Everyone can post
Search in posts:  

8. June 2007, 22:45:32
AbigailII 
Subject: Re: Next Task
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.

8. June 2007, 22:40:44
AbigailII 
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>

17. May 2007, 09:48:23
AbigailII 
Subject: Re: Links in simple style
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.

16. May 2007, 22:13:34
AbigailII 
Subject: Re: Links in simple style
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.

14. April 2007, 16:49:35
AbigailII 
Subject: Re: Dice Poker - Select Checkbox when you click dice
Modified by AbigailII (14. April 2007, 16:50:21)
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.

14. April 2007, 10:12:16
AbigailII 
Subject: Re: Dice Poker - Select Checkbox when you click dice
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.

12. April 2007, 14:01:45
AbigailII 
Subject: Some CSS tricks.
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% }

12. April 2007, 00:57:48
AbigailII 
Subject: Re: My 2 .css files
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

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, 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>

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.

30. March 2007, 13:04:23
AbigailII 
Subject: Encapsulation of items.
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.

30. March 2007, 00:06:20
AbigailII 
Subject: CSS
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.

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