CSS Profile Codes Tutorial -- A Comprehensive Guide | Page 2 | Forum

Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources

Excellent!		38.3%	[ 7383 ]
Good!		11.3%	[ 2185 ]
Okay		9.0%	[ 1729 ]
Not so bad :(		3.4%	[ 653 ]
Horrible :( :( :(		6.0%	[ 1158 ]
:ninja: .......GOLD!!!		32.0%	[ 6182 ]
Total Votes:	[ 19290 ]

Report ad

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_16 created on Tue, 18 Jul 2006 01:36:46 +0000
Posted: Tue, 18 Jul 2006 01:36:46 +0000

CUSTOM SECTIONS

Creating Custom Sections

All of the CONTENT for your custom section goes in your My Gaia --> Account --> About area.

Each new section is wrapped in either OL (ordered list) or UL (unordered list tags), it doesn't make a big difference which you use.

If you have multiple custom sections it begins to get confusing as you must have them layered inside each other. But as long as you can keep track you won't have any problems.

About text.

[list=1]
1st custom section.

[list=1]
2nd custom section.

[list=1]
3rd custom section.
[/list]
[/list]
[/list]

Make sure to end all of your sections. So if you have three custom sections you shoule have three "/list" tags.

Now here's the code part to put in your 'theme.'

#about ol {position: absolute; top: 0px; left: 0px; }
#about ol ol {position: absolute; top: 0px; left: 0px; }
#about ol ol ol {position: absolute; top: 0px; left: 0px; }

So the first one corresponds to your first section, the second to your second, and third to third and so on!!! Remember you can also apply all the other related codes to it such as background images, colors, fonts, etc. 3nodding SO have fun!!!

Now from what I understand ONLY the last section can have a scrollbar in it. SO, let's say you want your main ABOUT section to scroll, but don't care about the custom sections scrolling. In order for your about content to scroll you have to actually make it into a custom section. The LAST custom section to be exact.

This can get sort of confusing so I suggest you play with it alot before finalizing your profile.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_17 created on Tue, 18 Jul 2006 01:38:26 +0000
Posted: Tue, 18 Jul 2006 01:38:26 +0000

Misc. Advanced Codes

Changing the Hover Property of a Section

#section_name:hover {whatever property you want to mess with}

Basically what will happen is say, you make the section 'about' and say you make the code/property { color: red; }, then this code changes all font in the about section to the color red WHEN hovered over. But when it's not hovered over it will either be black or whatever other color you've set it to be.

You can change the hover for links/pictures/text... pretty much anything that has an id/class can have a hover property! ^.^

ONLY WORKS IN FIREFOX!!!

Changing The Status Bar

#bar

#bar #onlineButton
#bar #offlineButton
#bar #hiddenButton

#bar #addButton
#bar #msgButton
#bar #tradeButton
#bar #ignoreButton

#bar #addButton a
#bar #msgButton a
#bar #tradeButton a
#bar #ignoreButton a

The above are the possible parts of the status bar that can be changed. The following are the commands you can apply to them::

{ position: ----; left: 0px; top: 0px; }
{ height: 0px; width: 0px; }
{ background: url('xxx'); }

You should ALWAYS apply a height and width to your new status bar images UNLESS they are the exact same as Gaia's original ones.

To change the image simply give it a new background image using the "{ background: url('xxx'); }" code and then declare your position (if different from original) and height/width.

The "#bar #addButton a" id's refer to the image when your mouse is hovering over the button. IF you do NOT give them a new background image it will show the old Gaia image when you hover.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_18 created on Tue, 18 Jul 2006 01:39:23 +0000
Posted: Tue, 18 Jul 2006 01:39:23 +0000

Helpful Codes That Everyone Asks For

Centering The Profile

#site { margin-left: auto; margin-right: auto; }

Removing The Border Between Friends

#friends #friendGroup li { border: none; }

Removing The Border to the Right of the Profile

#extendedProfileBody #header, #content { border-right: 0px; }
#content { border-right: 0px; }
#content { border-right: none; ]

Theoretically all of these should work, but sometimes they're finicky.
So if one's not working, try another.

"Replacing" The Avatar

#profile .avatar { display: none; }
#profile { background: url('xxx'); height: 0px; width: 0px; }

This code does not really REPLACE your avatar, it simply puts your new "avatar" picture into the profile sections background.

This means you must have an idea of its approximate position when creating the image. You may have to mess around a few times to get it to work.

Be sure to give it height and width values, otherwise when the avatar disappears it will sometimes shorten the space that you need for the new picture.

Flipping Your Profile

#content #sidebar { left: 520px; width: 230px }
#content #main { margin-left: -10px; width: 500px; }

This will flip the contents of your profile so that your 'about' side and your 'profile' side (and everything that goes under em) are flipped.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_19 created on Tue, 18 Jul 2006 01:41:55 +0000
Posted: Tue, 18 Jul 2006 01:41:55 +0000

F.A.Q.

Q. Can I PM you?
A. NO! You may only PM thread helpers that accept them.

Q. Can you make me a profile?
A. Maybe. Check my profile section.

Q. Can you make me a profile for free?
A. Sorry, no.

Q. Can I take your profile?
A. ABSOLUTELY NOT! And please don't take anyone else's either unless they give you permission.

Q. My codes aren't working can you fix it?!?!
A. Yes and no. While we don't want to take time to look through your whole profile we might help you with a select section or two.

Q. My codes aren't working what do I do? crying
A. Well first check the following things before coming to us, then once you've checked over them go ahead and post your question::
Did you....make sure the spelling is correct?
Make sure to have.. { and } on their respective sides?
Check all spaces to make sure you don't have too many or too little?
Make sure you have these --> # before your codes? (if they require it)

Q. Where are all the codes? Will you put them back?
A. No, sorry. The purpose of this new tutorial layout is that it is there to teach people. It's really a simple process of putting the name of the section you want together with the codes you want. With the last one people were copy and pasting and not learning. I've had a few people say they just copy & pasted and they don't even remember the codes. I want people to LEARN the material. However, we have put a link to some codes in the front post in case you're really lazy or are having troubles figuring something out. A quote from htmlgoodies:: "I think that if you want to teach people something, you simply must make a point of getting them involved."

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_20 created on Tue, 18 Jul 2006 01:42:48 +0000
Posted: Tue, 18 Jul 2006 01:42:48 +0000

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_21 created on Tue, 18 Jul 2006 01:45:04 +0000
Posted: Tue, 18 Jul 2006 01:45:04 +0000

Profile Codes Related

User Image - Blocked by "Display Image" Settings. Click to show.

by Tutsumi:: Profile Tutorial/Codes & Good Multimedia Tutorial.

by Lord Oni-mushu:: Profile Tutorial/Codes.

by Kira Catgirl:: Profile Tutorial/Codes.

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_22 created on Tue, 18 Jul 2006 01:46:50 +0000
Posted: Tue, 18 Jul 2006 01:46:50 +0000

Profile Help Related

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_23 created on Tue, 18 Jul 2006 01:47:51 +0000
Posted: Tue, 18 Jul 2006 01:47:51 +0000

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_24 created on Tue, 18 Jul 2006 01:49:16 +0000
Posted: Tue, 18 Jul 2006 01:49:16 +0000

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_25 created on Tue, 18 Jul 2006 01:50:32 +0000
Posted: Tue, 18 Jul 2006 01:50:32 +0000

Profile Guilds

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_26 created on Tue, 18 Jul 2006 01:52:17 +0000
Posted: Tue, 18 Jul 2006 01:52:17 +0000

General Profile Related

by I.T.C.H.Y [P E N G U I N]:: a Profile Discussion Thread.

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_27 created on Tue, 18 Jul 2006 01:53:25 +0000
Posted: Tue, 18 Jul 2006 01:53:25 +0000

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_28 created on Tue, 18 Jul 2006 01:54:29 +0000
Posted: Tue, 18 Jul 2006 01:54:29 +0000

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_29 created on Tue, 18 Jul 2006 01:55:36 +0000
Posted: Tue, 18 Jul 2006 01:55:36 +0000

Affiliates

[url=http://www.gaiaonline.com/forum/viewtopic.php?t=15730229&]
[IMG]http://i6.photobucket.com/albums/y244/kahime/Profile/CSS1.jpg[/IMG][/url]

Want to be an affiliate? If you're a profile related thread just post in the thread and we'll link you, though please take our code as well ^.^ If you're a quest/minishop/etc please request in the thread and we'll check you out and send you a yes/no. ^.^

Threads I Own/Work In::