BrainKing - Forum (BrainKing design)

Toezichthouder: 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

Forumlijst
U hebt geen toestemming om berichten op dit forum achter te laten. Het minimaal vereiste lidmaatschap om berichten op dit forum achter te mogen laten is Brain Paard.

Modus: Iedereen kan berichten achterlaten

4. april 2007, 05:00:21

coan.net

toon berichten van deze speler | toon onderwerp | link

Onderwerp: CSS file

Aangepast door 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.

4. april 2007, 07:49:12

Fencer

toon berichten van deze speler | toon onderwerp | link

Onderwerp: Re: CSS file

BIG BAD WOLF: Good one.

But maybe you should rename the extension to .css, ccs is a typo.

4. april 2007, 15:37:40

coan.net

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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, 16:15:29

coan.net

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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, 16:18:53

coan.net

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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:21:39

coan.net

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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, 17:06:41

pauloaguia

toon berichten van deze speler | toon onderwerp | link

Onderwerp: Re: CSS file

Aangepast door 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, 17:40:09

coan.net

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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, 18:00:55

pauloaguia

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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, 18:07:32

coan.net

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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:44:07

Luke Skywalker

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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:46:59

pauloaguia

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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, 19:00:36

coan.net

toon berichten van deze speler | toon onderwerp | link

Onderwerp: 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.