Soysauce CSS guide

HAPPY BIRTHDAY GUIDE!

HAPPY B-DAY! Also, we still using this guide XP	100.0%	[ 539 ]
Total Votes:			[ 539 ]

[SoySauce777]

Wanna make those cool profile stuff that everybody has???

Well I made a this tutorial for 2 reasons!:

1.) To help you guys who!
2.) Cuz, I'm bored

Please vote in the poll as it's a people counter. I just want to know how many people use this guide.

Updates:
1/3/07: OMFG! Thread is a year old! Happy Birthday CSS Guide! Also, I added 2 selectors. Not much of an update. I'm still working on the positioning and size part. I haven't done much changes because, well, forgot. If you saw my profile, I've been changing stuff around for the guide. I may finish this later, but not now because I should sleep.
6/30/06: wow, been a long time XD well it's summer so i have plenty of time. Starting on the new section, Positioning and Size.
2/6/06: I forgot to tell people about the update... Well, just wanted to say I added the scrollbar section
1/8/06: Well, I finished adding the signature part. I also added a friends bar part to the section. Added some selectors and stuff.
1/7/06: Right now it's 1:14 a.m. I finished a few stuff here. You probably see somethings different. I hope it helps!
1/6/06: I added the comment section and the selectors so that you don't have to go to the first page to understand what the selectors do. Eventually, it'll probably replace the selector section.
1/1/06: I added a new section for those who don't know what I'm talking about. I hope it helps.

Contents:
Basics
The code
Cool image effects!
List of Selectors
Where do the Selectors Go???
Positioning and Size
Fonts
Special Thanks

[SoySauce777]

Basics:

1.) The look of the code:

Thing1{Thing2:Thing3}

Thing1: This here is called the selector. Think of the html page (please, I hope you know what that is) as a list of different things on it. The selector is the part of your profile you'd like to change.

Thing2: This here is called the property. The property is part of the part of the profile (I hope that makes sense) you want to change, such as font, font color, or background color.

Thing3: This here is called the value. After getting the part of the part of the profile you want to change, the value is what your going to change it too. You know, the font color being blue, or the font color being black.

2.) Seperating properties and values

selector{property1: value1 ; property2: value2}

When you have more than 1 property and value, use

;

to seperate the properties and values to avoid problems.

3.) Using comments:

/*Comment here*/

Wanna make little comments so you know what that code means or any other reason? Using "/*" and "*/" can be used to make comments.

4.) Colors:

#000000

or

rgb(red color, green color, blue color)

When using color values, you may use a hex value (top one) or rgb value (bottom one). If you do not no a hex value's name, it may be easier to use the rgb on instead.

[SoySauce777]

The Code:
This here are codes on how to alter certain things. To find out what you want to alter, please check the selectors section.
Replace the example selector with the one you want to use.

1.) Change background:

body{background: ****}

2.) Change background by using a picture (repeating):

profile {background: url(*URL HERE*)}

3.) Change background by using a picture (no repeating):

profile {background: url(*URL HERE*) no-repeat}

4.) Change font family:

profile {font-family: *FONT FAMILY HERE*}

5.) Change font size:

profile {font-size: *FONT SIZE HERE*}

6.) Change font style (Bold):

profile {font-style: Bold}

7.) Change font style (Italic):

profile {font-style: Italic}

8.) Change font style (Oblique):

profile {font-style: Oblique}

9.) Change alignment of text:

profile {text-align: *ALIGN VALUE HERE*}

Possible values:
center
left
right

10.) Change border style:

profile {border: *STYLE HERE*}

Possible values:
none
dashed
dotted
grove
solid

11.) Change border width or thickness of the border:

profile {border-width: *STYLE HERE*}

Possible values:
thin
medium
thick

12.) Change border color:

profile {border-color: ****}

****: Use either a hex value or RGB value. Check the basics section for help.
Note: Replace *(certain type of value) HERE* with the values.

[SoySauce777]

Cool image effects:

1.) Invert colors:

#avatar{filter: invert}

2.) Glowing effects:

#avatar{filter: glow(color=CCC strength= ZZZ)}

CCC = color values
ZZZ = number value
NOTE: Filters will only work on Internet Explorer

[SoySauce777]

Selectors:

Blocks and Headers:

#profile

Changes the profile block.

#profile h2

Changes the profile header.

#details

Changes the details block.

#details h2

Changes the details header.

#wishlist

Changes the wishlist block.

#wishlist h2

Changes the wishlist header.

#about

Changes the about block.

#about h2

Changes the about header.

#friends

Changes the friends block.

#friends h2

Changes the friends header.

#journal

Changes the journal block.

#jounral h2

Changes the journal header.

#multimedia

Changes the multimedia block.

#multimedia h2

Changes the multimedia header.

#comment

Changes the comment block.

#comment h2

Changes the comment header.

#signature

Changes the signature block.

#signature h2

Changes the signature header.

Main Header:

#extendedProfileBody #header h1

Changes image in the main header.

Profile Selectors:

#profile ul.items

Changes items in your profile block.

#profile .avatar

Changes the avatar in your profile block.

Wishlist Selectors:

.items img

Changes items in your wishlist block.

Friendlist Selectors:

#friends #friendGroup li img

Changes friends in your friendlist.

Message Box Selectors:

.caption

Changes the message box in the profile and comment block.

.caption .message

Changes the arrow of the message box in the profile and comment block. Use an image to change it.

.caption2

Changes the second message box in the comment block with the arrow pointing to the avatars at the right.

.caption2 .message

Changes the arrow of the message box in the comment block that's pointing to the avatars at the right. Use an image to change it.

Comment Selectors:

#comments dl dt.avatar img

Changes the avatars in the comments section. Only applies to the left avatars.

#comments dl dt.avatar img2

Changes the avatars in the comments section. Only applies to the right avatars.

Profile Bar Selectors:

#profile #bar

Changes the profile bar.

#profile #bar #onlinebutton

Changes the online button. Only shows if person is online.

#profile #bar #offlinebutton

Changes the offline button. Only shows if person is offline.

#profile #bar #hiddenbutton

Changes the hidden button. Only shows if person is hidden.

#profile #bar #addbutton

Changes the add to friends button.

#profile #bar #msgbutton

Changes the send message button.

#profile #bar #tradebutton

Changes the trade items button.

#profile #bar #ignorebutton

Changes the add to ignored button.

ScrollBar Selectors:

scrollbar-3dlight-color

Changes the 3dlight color of the scrollbar.

scrollbar-arrow-color

Changes the arrow color of the scrollbar.

scrollbar-track-color

Changes the track-color of the scrollbar.

scrollbar-darkshadow-color

Changes the darkshadow color of the scrollbar.

scrollbar-face-color

Changes the face color of the scrollbar.

scrollbar-highlight-color

Changes the highlight color of the scrollbar.

scrollbar-shadow-color

Changes the shadow color of the scrollbar.

Others:

body

Changes the body (can be used to change the background in the very back)

#content

Changes the content (can be used to change the background behind all the blocks)

[SoySauce777]

xp sweatdrop xd Where do the selectors go??? xp sweatdrop xd

Well, I kinda wanted to make a way so people won't be confused.

If you guys don't know yet (hopefully you do) a selector is the name of the part of you profile you want to

change.

Profile Block:

#profile

Changes the profile block.

#profile h2

Changes the profile block header.

#profile ul.items

Changes items you're wearing in your profile block.

#profile .avatar

Changes the avatar in your profile block.

Details Block:

#details

Changes the details block.

#details h2

Changes the details block header.

Wishlist Block:

#wishlist

Changes the wishlist block.

#wishlist h2

Changes the wishlist block header.

.items img

Changes items in your wishlist block.

About Block:

#about

Changes the about block.

#about h2

Changes the about block header.

Friends Block:

#friends

Changes the friends block.

#friends h2

Changes the friends block header.

#friends #friendGroup li img

Changes friends in your friendlist.

Journal Block:

#journal

Changes the journal block.

#journal h2

Changes the journal block header.

Comments Block:

#comment

Changes the comment block.

#comment h2

Changes the comment header.

#comments dl dt.avatar img

Changes the avatars in the comments block. Only applies to the left avatars.

#comments dl dt.avatar img2

Changes the avatars in the comments block. Only applies to the right avatars.

.caption

Changes the message box in the profile and comment block.

.caption .message

Changes the arrow of the message box in the profile and comment block. Use an image to change it.

.caption2

Changes the second message box in the comment block with the arrow pointing to the avatars at the

right.

.caption2 .message

Changes the arrow of the message box in the comment block that's pointing to the avatars at the right.

Use an image to change it.

Multimedia Block:

#multimedia

Changes the multimedia block.

#multimedia h2

Changes the multimedia block header.

Signature Block:

#signature

Changes the signature block.

#signature h2

Changes the signature block header.

Profile Bar:

#profile #bar

Changes the profile bar.

#profile #bar #onlinebutton

Changes the online button. Only shows if person is online.

#profile #bar #offlinebutton

Changes the offline button. Only shows if person is offline.

#profile #bar #hiddenbutton

Changes the hidden button. Only shows if person is hidden.

#profile #bar #addbutton

Changes the add to friends button.

#profile #bar #msgbutton

Changes the send message button.

#profile #bar #tradebutton

Changes the trade items button.

#profile #bar #ignorebutton

Changes the add to ignored button.

ScrollBar:

scrollbar-3dlight-color

Changes the 3dlight color of the scrollbar.

scrollbar-arrow-color

Changes the arrow color of the scrollbar.

scrollbar-track-color

Changes the track-color of the scrollbar.

scrollbar-darkshadow-color

Changes the darkshadow color of the scrollbar.

scrollbar-face-color

Changes the face color of the scrollbar.

scrollbar-highlight-color

Changes the highlight color of the scrollbar.

scrollbar-shadow-color

Changes the shadow color of the scrollbar.

[SoySauce777]

Positioning and Size:

Ok, now probably one of the hardest things to do, is trying to make your own positioning and the block's sizes.

Note: This may be hard to understand.

Positioning:

1.) There are two kinds of ways to position blocks:
a. absolute
b. relative

In this guide, we'll be using relative positioning. What's the difference?

a. absolute: Ok, everything will be positioned at zero (if you don't do anything). In other words, you'll see it at the top-left hand corner. Then, you give it new place to be at.

b. relative: instead of everything going to the corner, all the stuff stays still or they don't get moved at all (if you don't do anything). The way you position it is that it moves how many spaces from the spot it's originally at. For example, you want to move it up the screen 2 pixels from where it is. You type the number -2px and it moves up 2 pixels.

More to come soon ^_^; (hopefully... it's summer so i should have lots of time)