• Topic Archived
You're browsing the GameFAQs Message Boards as a guest. Sign Up for free (or Log In if you already have an account) to be able to post messages, change how messages are displayed, and view media in posts.
  1. Boards
  2. Blood Money
  3. Takato's CSS Tutorials - Learn CSS here!

User Info: Takato

Takato
10 years ago#1
Welcome to Takato's CSS Tutorials. I am your host, Takato, and I will be teaching you how to code with CSS.

I will start with the basics. If you have questions, feel free to ask. If you already know CSS, feel free to add your own tutorials or hints or help out anyone who has questions.


Okay, well, to start, I will be doing CSS in Firefox, using the Stylish extension. In order to follow my tutorials, I advise that you get all that. I will not help you if you don't use that stuff.

Before doing any CSS work, you should go into your GameFAQs settings and change the display to "V9". We are going to be working from that. Also, go into GameFOX and disable ALL CSSs in there, so that they dont mess around with this. You should also disable Adblock Plus, or tell it "Disable on www.gamefaqs.com".


Don't forget to turn off your style when you are finished. Otherwise you will see it all the time. Unless of course, it does something you want to see all the time, but in this tutorial we will mostly be doing random stuff to get you familiar with how to do CSS.


COMING IN THE NEXT POST: Starting a new CSS.
I'm not as good as Tofa7. (Until 4th Nov)
LoZ-LoD: Batteries not included.

User Info: Takato

Takato
10 years ago#2
To start a CSS, tell Stylish to create a blank style. Give the style a title (such as "OMG i luv takato").

By default, the style will apply to EVERY website you go to. That is bad. We only want it to apply to pages on GameFAQs. So what we do is put all our code inside a section that specifies GameFAQs.

@-moz-document domain("gamefaqs.com") {}



Lets break this up and translate it into English.

@-moz-document domain("gamefaqs.com") {} - Apply the CSS in the brackets to every page on gamefaqs.com
@-moz-document - We are going to tell Firefox an address to use.
domain("gamefaqs.com") - The address is "gamefaqs.com", and will apply to ALL pages on that website.
domain - Apply to ALL pages on this website.
{} - Inside these curly brackets is all the CSS. At the moment, we dont have any CSS, which means they are empty.

Now, I want to point out the bit that says domain("gamefaqs.com"). Using different words instead of domain will do different things.

domain - Apply the CSS to EVERY page at that website.
url - Apply the CSS to the page with this EXACT address.
url-prefix - Apply the CSS to any page with this at the START of the address.

So let me give you an example.

domain("gamefaqs.com") - Apply the CSS to EVERY page at gamefaqs.com
url("http://www.gamefaqs.com/boards/gentopic.php?board=565885") - Apply the CSS ONLY to the Blood Money Topic List.
url-prefix("http://www.gamefaqs.com/boards/gentopic.php?board=") - Apply the CSS to EVERY Topic List.


Before we move on, I should give you a basic overview of what I call brackets. In general, () [] and {} are all brackets, but if I am refering to specific brackets, they are...
() - Brackets (or normal/regular brackets)
[] - Square Brackets
{} - Curly Brackets

That is the Australian English standard of bracket names, and is what I will be using.



Okay, so we have told Stylish to only apply our CSS to GameFAQs.com

@-moz-document domain("gamefaqs.com") {}



All our CSS code needs to go inside the curly brackets. Lets open up some space for code.

@-moz-document domain("gamefaqs.com") {



}



Keep making it bigger when you need more room.
I'm not as good as Tofa7. (Until 4th Nov)
LoZ-LoD: Batteries not included.
#3
(message deleted)

User Info: RPGamerdude

RPGamerdude
10 years ago#4
Thank you, Takato. I'll be following this. It'll be great to learn, I think.

By the way, before we get too deep, I'd like to ask a question:

How do comments work?

While putting the code you teach into Stylish, I want to be able to make reference notes. Does it work the same way as in languages like Java and C++? i.e.:

// line comment

or

/* Start of comments
*Comments
* Last line of comments
*/

Notes telling me what's happening would help a lot, but I want to know how to make these notes.
"The world is garbage!" ~Sho Minamimoto

User Info: Takato

Takato
10 years ago#5
Comments.

You can put comments in CSS like this.


/** Wow, look, this is a comment. Oooh, fancy. **/



Anything between the two symbol blocks is treated as a comment. HOWEVER, you can not put comments inside comments. Eg...

/** Look, a comment. /**Hey, another comment. **/ bye comments. Bye bye. **/



CSS will treat that as this...

/** - Start comment.
Look, a comment. /**Hey, another comment. - inside the comment.
**/ - End comment.
bye comments. Bye bye. **/ - Invalid code.
I'm not as good as Tofa7. (Until 4th Nov)
LoZ-LoD: Batteries not included.

User Info: Takato

Takato
10 years ago#6
Also, comments can work in blocks. For example, lets say you had a bunch of code in your CSS, and you wanted to test how the CSS would work without that bit of code, but you dont want to just delete the code.

/**
code.
code code code.
code red.
crack the code. ooh, more code.
so i heard u liek code
**/




This is known as "commenting out" a section of code. It ignores all that code inside the comment blocks.
I'm not as good as Tofa7. (Until 4th Nov)
LoZ-LoD: Batteries not included.

User Info: SPELLING_POLICE

SPELLING_POLICE
10 years ago#7
It's optional, but you can put:

@charset "UTF-8";

at the start of your CSS, to make it unicode.
Zombies. They're everywhere.

User Info: SPELLING_POLICE

SPELLING_POLICE
10 years ago#8
Oh, and for comments, you don't need the double *, you just need one:

/* This is a comment. */
Zombies. They're everywhere.

User Info: Takato

Takato
10 years ago#9
REMEMBER: Use "V9" as site display setting, and disable all other CSSs. (except perhaps "GFCode"). Using "Above Message" for the posted by display is also a good idea.

Next, lets talk about a basic background colour change.

I want to change the message boxes (like the one you are reading this in right now) so that they display with a green background.

Lets add some code to our CSS, inside the {curly brackets} from our @-moz-document section.

table.message tr.even td { }



I will explain what that bit means later, but basically it specifies the object we want to change, and then has { } for us to put the change in.

In other words, it is formed like this.

I want to change the message boxes {I want them to be green}

So lets put "I want them to be green" in the { }. The property we are changing is the background-color (it uses American spelling), and we want it to be green.

background-color: green;



What does that mean?

background-color is the property we want to change. We want to change the background colour.
: says "I have said the property, and now I am ready to tell you what it should be.
green is the colour we want.
; says "thats all done now. you can move on to the next bit".

If you have tried to do this, you will see that it doesn't actually work. This is beause GameFAQs CSSs are taking priority. We need to tell this line of code to overrule anything that GameFAQs says. We do this by turning the ; into !important;

background-color: green !important;



Now lets put that all together.

table.message tr.even td {background-color: green !important;}



So that line says "make the message boxes have a background colour that is green".

Give that a try in your CSS. Your full CSS file should look something like this....

@-moz-document domain("gamefaqs.com") {

table.message tr.even td {background-color: green !important;}

}



Press the "Preview" button to see how it looks. Wow! The message boxes turned green! Well done! If you click "Save", it will save your CSS and close its window. You can always open it up again, and it is a good idea to save often, but just use "Preview" if you want to see what the CSS does.


Hmm, this may just be due to my eyesight, but I find the words hard to read on this green background. Perhaps we should make the words turn white.

To make text change its colour, you just go..

color: white !important;



Where do we put that? Well, it applies to the message box still, so lets add it into that bit.

table.message tr.even td {background-color: green !important; color: white !important;}



Give that a try. Did the text turn white? Good.

Now I want you to change the background colour. We made it green, but I want you to try a few different colours. Replace "green" with any other colour you can think of. It will recognise basic colours, but it won't recognise 'fancy' ones like "beige" or "charcoal" or "light blue" or "gold". The main colours are...
- Black
- White
- Red
- Blue
- Yellow
- Green
- Grey
- Brown
- Orange
- Purple
etc..

So try a few different colours. Once you pick one you like, you will probably need to change the text colour too. Change that to something that looks good.

When that is all done, dont forget to save.
I'm not as good as Tofa7. (Until 4th Nov)
LoZ-LoD: Batteries not included.

User Info: Takato

Takato
10 years ago#10

SPELLING_POLICE | Posted 10/6/2008 4:56:41 PM (#008)
Oh, and for comments, you don't need the double *, you just need one:

/* This is a comment. */



That is a good point. Although, I personally prefer double *s because it makes it clearer. However, it makes no difference to the code.
I'm not as good as Tofa7. (Until 4th Nov)
LoZ-LoD: Batteries not included.
  1. Boards
  2. Blood Money
  3. Takato's CSS Tutorials - Learn CSS here!
  • Topic Archived