Welcome to Gaia! :: CSS Profile Codes Tutorial -- A Comprehensive Guide | Forum

Register FaceBook Login Login

 

 
GST

Welcome to Gaia's forums, where millions of members gather to discuss random stuff, make new friends,
complain about life, argue about nothing, laugh at dumb pictures, discuss serious issues and/or curse like sailors.

Lurking is creepy. Quit skulking in the shadows and join the conversation!

Register to reply

Advertisement

How do you like the new tutorial???

Excellent! 0.38938547486034 38.9% [ 5576 ]
Good! 0.1159217877095 11.6% [ 1660 ]
Okay 0.085055865921788 8.5% [ 1218 ]
Not so bad :( 0.031494413407821 3.1% [ 451 ]
Horrible :( :( :( 0.055446927374302 5.5% [ 794 ]
:ninja: .......GOLD!!! 0.32269553072626 32.3% [ 4621 ]
Total Votes: 14320
Share:  
forum:92, topic:15730229
< 1 2 3 4 5 6 3 4 5 6 7 ... 558 559 560 > >> >>> »|
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 |
 
     
 
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 |
     
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 |
 
     
 
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 |
     
 
Profile Codes Related


http://snipurl.com/kou2
by Tutsumi:: Profile Tutorial/Codes & Good Multimedia Tutorial.

http://tinypic.com/fvw9dz.jpg
by Lord Oni-mushu:: Profile Tutorial/Codes.

http://tinyurl.com/dzoew/mcplink.png
by Kira Catgirl:: Profile Tutorial/Codes.

http://i4.tinypic.com/10za79l.gif
by Chocolate Mousse:: Codes & Design

[Simple Tutorial] Gaia Extended Profiles - Custom CSS by Lord-of-the-flies:: Profile Tutorial/Codes.
Soysauce CSS Guide by SoySauce777:: Profile Tutorial/Codes.
Guide To Building Your Own Profile by Evadine:: Profile Tutorial/Codes.
Filter effects and color advice for your profile! by Hatchet Kid:: A more extensive list of filter codes & some design advice.
An All Out CSS Guide // Customizing Old School Layouts by Elindranyth:: Profile Tutorial/Codes.


| 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 |
     
Profile Help Related


http://tinypic.com/ivjz85.gif
by Lamination:: external link w/ HEX codes, a CSS editor, and other helpful links.

Adding Music to Your Profile - by Demonic Life
CSS: Mastering Your Profile by Mwa:: Has some great links to helpful applications.
Multimedia - .:YouTube + Playlist:. . razz hotobucket:. .:Bolt:. by o0NeMo0o:: Multimedia Help.
Profile Help: Top 10 friendslist by Lonewolf_Osiris:: How to Rearrange Your Friends. (top 10)
RANDOMIZED PROFILE MEDIA by Lance Tennichan:: a guide to randomize your multimedia.

Web Developer Extension - a Firefox extension, validates CSS code, shows image sizes, view source button, and more!!!


| 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 |
 
     
General Profile Related



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

http://snipurl.com/jv3t Get Your Profile Quilted and Browse Hundreds of other Profiles!

PRS - by o0arwyn0o:: Better Protect Your Profile! A thread w/ images you can use to show how much if any of your profile can be used by others.


| 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 |
 
     
 
Affiliates




[url=http://www.gaiaonline.com/forum/viewtopic.php?t=15730229&&#93;
[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. ^.^




| 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's Profiles


Here I will show-case the profiles I've made and also list whether or not I am currently making profiles.
I will also post links to any tek-tek profiles I create or that need voting on.

Profiles Open:: NO.

(more info to come later)


Note that if 'profiles open' says 'NO' do NOT by any means PM me, post in my profile asking for one, or ask me anywhere else for one.



| 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 |
 
     
< 1 2 3 4 5 6 3 4 5 6 7 ... 558 559 560 > >> >>> »|

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

We will be phasing out support for your browser soon.

Please upgrade to one of these more modern browsers.