CSS Profile Codes Tutorial -- A Comprehensive Guide

How do you like the new tutorial???

Excellent!	38.4%	[ 6795 ]
Good!	11.3%	[ 1999 ]
Okay	8.8%	[ 1562 ]
Not so bad :(	3.3%	[ 587 ]
Horrible :( :( :(	5.9%	[ 1050 ]
:ninja: .......GOLD!!!	32.2%	[ 5690 ]
Total Votes:			[ 17683 ]

[clawdog]

also when ever I type in a code it doesn't work and it's making me mad > sad

[Knight Yoshi]

LipstickTM

Change it from Classic-"Classic" to Classic-"Custom", drop menu above your CSS override box on your profile preference page, same goes for GaiaTools, buttom of the editor side select the Custom option.

[Knight Yoshi]

clawdog

also when ever I type in a code it doesn't work and it's making me mad > sad

Are you using the right selectors? This is doesn't have Current profile selectors, kinda the wrong thread :<

[clawdog]

i did

[clawdog]

OH I SEE NOW THANKS i was using custom.LOL pew

[faiblexdifficle]

Knight Yoshi

You use to be able to hide it, you still can technically, but its more hassle than its worth. the devs removed the ID tag that paragraph element use to have :<

Also remove your signature before it gets reported and disabled. It's way over the file size limit: 100,000 bytes. Your's 496,640 bytes.

Thank you, I've already had it fixed forgot to mention that.
And thank you for the information, I've taken it down, even though I've had this signature up for 1 year. 4laugh

[Kidan Zombifield]

er mind if i asked how to make your profile right in the center .. i'm bad at this profile stuff

i need help please ?

[Knight Yoshi]

Kidan Zombifield

er mind if i asked how to make your profile right in the center .. i'm bad at this profile stuff

i need help please ?

Depends on the profile, but the main idea is you take the parent element set a width, then use margin to center it.

[Poison Parody]

Whoot! Finally, I figured out the damned friends section & finished the code. THANK. YOU.
Now all I have to do is figure out the contact information. xD I'll figure it out in a little while~

[Knight Yoshi]

Poison Parody

Whoot! Finally, I figured out the damned friends section & finished the code. THANK. YOU.
Now all I have to do is figure out the contact information. xD I'll figure it out in a little while~

#profile #bar { declaration block }
#profile #bar addButton { declaration block }
#profile #bar msgButton { declaration block }
#profile #bar tradeButton { declaration block }
#profile #bar ignoreButton { declaration block }

[xcrimsonlegendx]

I'm having issues replacing the buttons on my profile, the default classic ones for the Grunny theme. I've remade all of the buttons as I want them but I can't figure out the code to replace them properly.

[Poison Parody]

Knight Yoshi

#profile #bar { declaration block }
#profile #bar addButton { declaration block }
#profile #bar msgButton { declaration block }
#profile #bar tradeButton { declaration block }
#profile #bar ignoreButton { declaration block }

emotion_kirakira

Thank you very much. C:

[Knight Yoshi]

xcrimsonlegendx

I'm having issues replacing the buttons on my profile, the default classic ones for the Grunny theme. I've remade all of the buttons as I want them but I can't figure out the code to replace them properly.

CSS properties are in the thread, click the image link in signature for and go to positioning post.

[Mayelle]

I just thought I should suggest this:

When defining a font, if the font's name has more than one word, you must write: 'font name' (such as: 'Times New Roman' or 'Arial Unicode MS'), whereas if it's name only has one word, you don't need it (such as: Verdana or Tahoma).
Also: it is suggested, because a font does not show if it is not installed on the computer, to add a specification at the end to the type of font. For instance, I would write:

font-family: Arial, Verdana, sans-serif;

So the computer automatically switches to a font in that family. (If my sources are correct, those families are: serif, sans-serif, cursive, fantasy and monospace.) Why I say this: because people don't necessarily have fonts installed, even if they are part of a "safe list".
I know it gets technical here (for people who don't know what these families mean). I'm not even sure what "fantasy" fonts are (or novelty, I think, but that still sort of leaves me a little stumped). But serif, sans-serif and monospace are easy to define =D

This is just a precision and you can totally ignore it! I just thought it could be good to add =]

[Knight Yoshi]

Mayelle

I just thought I should suggest this:

When defining a font, if the font's name has more than one word, you must write: 'font name' (such as: 'Times New Roman' or 'Arial Unicode MS'), whereas if it's name only has one word, you don't need it (such as: Verdana or Tahoma).
Also: it is suggested, because a font does not show if it is not installed on the computer, to add a specification at the end to the type of font. For instance, I would write:

font-family: Arial, Verdana, sans-serif;

So the computer automatically switches to a font in that family. (If my sources are correct, those families are: serif, sans-serif, cursive, fantasy and monospace.) Why I say this: because people don't necessarily have fonts installed, even if they are part of a "safe list".
I know it gets technical here (for people who don't know what these families mean). I'm not even sure what "fantasy" fonts are (or novelty, I think, but that still sort of leaves me a little stumped). But serif, sans-serif and monospace are easy to define =D

This is just a precision and you can totally ignore it! I just thought it could be good to add =]

The reason the names that have more than one word for the name need quotes is because it is called a string, strings need a start and stop point.
For a list of web safe fonts go to: http://www.w3schools.com/cssref/css_websafe_fonts.asp
However with CSS3's @font-face rule developers do not have to use standard fonts, and can define they're own fonts.

Example:
@font-face {
font-family: some-name;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE */
}

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp