[GUIDE] Learn How To Code v2/Current Profiles

[KayleyV2]

apple

I see threads all the time where people ask the same question over and over, like inquiring how to add a scrollbox. I've decided to create a guide that I could reference when these situations arise, instead of having to type it out each time.

This guide is for editing your profiles with CSS. If you want to edit using just the customization box and no CSS, you might want to check out Galactic Senator Paradine's Getting to know your profile! guide instead. If you are completely new to Gaia, you may still want to check out that guide to learn how to actually add panels to your profile.

If you're confused about where to put codes or what v2/Current profiles are, check out the Profile System F.A.Q. in this post.

Also, I use the abbreviation I.E. a lot. In this guide, it is used to show an example of a preceding concept. I know that I should use e.g. instead, but I.E. works fine for me. I just wanted to explain that ahead of time in case anyone got confused.

If you have questions about anything in this guide, feel free to make a reply in this thread. Please make sure to explain your question clearly; it is hard to offer a solution if I don't understand your problem. Answering questions in this thread will be my first priority.

Please do NOT PM me. I will answer questions in this thread when I am available.

I am grateful to all of you who appreciate my thread, but unfortunately I do not have time to reply unless I'm answering a question (and sometimes I don't even have time for that). I just want you all to know that I am glad I have helped you and that I hope for your success in profiling.

Helpers (please do not PM these users; this is just for recognition because they help in the thread)
Radiocarbon
Monblanc
Skalavera
Syrah Mu
xColorMyLife
labyrinths
Swell Sundae




I've added keywords for each section to make each one easier to find. To use these keywords, just hit the CTRL and F key at the same time to open the search box, then type in the keyword. The page should skip right to the part that you want.

The keywords are written in red beside the section listing. Don't type the brackets when searching for a keyword; I added those to separate the word from the title.

I. INTRODUCTION, INDEX, AND CREATING IMAGES [apple]
_____ a. PROFILE SYSTEM F.A.Q. [banana]
_____ b. QUICK TRICKS [celery]
II. LIST OF SELECTORS [date]
_____ a. CURRENT PROFILE SYSTEM MAIN SELECTORS [eggplant]
_____ b. CURRENT PROFILE SYSTEM PANEL SELECTORS [fig]
_____ c. CURRENT PROFILE SYSTEM HEADER SELECTORS [grape]
III. CSS WITH CUSTOM SECTIONS [kiwi]
IV. LIST OF (CSS) CODES [lemon]
_____ a. LIST OF BASIC CODES [orange]
_____ b. LIST OF SPECIFIC CODES [strawberry]
V. LIST OF HEX CODES [watermelon]
VI. LINKS IN/OUT AND OTHER STUFF [yam]



Are you wondering how people get those pretty backgrounds for their profiles? No, they don't search Google. No, they don't use some generator or website. They make the background and graphics themselves using image-editing programs.

Most profilers used Adobe Photoshop or Corel Paint Shop Pro to make graphics. If you cannot afford either of these, Google GIMP or Paint.Net.

This guide is not here to teach you how to make images for your profile. Once you have a program to use like Photoshop or GIMP, just search Google with "[program name here] tutorials" (I.E. "Photoshop tutorials). You should be able to get a lot of good results.

banana

What is the difference between Old School/Classic profiles and v2/Current profiles?

Both of these Gaia profile systems have different selectors (selectors are explained in the next post). v2/Current also has a customization box which you can use the edit the profile without CSS; this feature is not available on Old School/Classic profiles.

This guide is for v2/Current profiles, so if you want to use it, you need to make sure you are on the Current profile setting.

How do I switch from Classic to Current?

Go to My Gaia --& Account. Scroll down to the dropdown menu labeled "Choose profile". Switch from Classic to Current.



Where do I put these codes?

You put the codes under My Gaia --& Account --& Theme.

If you were on the page shown above, you would just click Theme on the sidebar. Then you would be here:

celery

These are just a few common codes that users ask about in the forums.

Changing the Color of the Blue Bars on Panels
.panel h2{background: #######;}
These blue bars are the headers for each section. They say things like "About", "Signature", etc. You need to edit the ####### with a hex code or color name. There is a small list of hex codes in the fifth post of this thread (keyword: apple).

Making All Panels Partly Transparent
#columns{opacity: .8; -moz-opacity: .8; filter:alpha(opacity=80); -khtml-opacity: .8;}
You can edit the parts in green, but it is not required for the code to work. Editing the numbers will just vary how transparent the sections are.

Adding A Scrollbox
selector{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: ##px;}
You must edit the parts in red. There is a list of selectors in the next post; that is what you will replace "selector" with. You will replace the ## with how long you want the section to be before it scrolls.

Move Panels Out of Their Columns
#columns, #column_1, #column_2, #column_3{overflow:visible;}

[KayleyV2]

date

This is the basic format for a CSS code:
selector{property: value;}

For example, in this code:
#id_comments{height: 234px;}
#id_comments is the selector.
height is the property.
234px is the value.

Different properties and values will be given in the next post. In this post, I will be giving a list of selectors that are used in the v2/Current profile system. You will be using them to edit the codes given in the next post.

CURRENT PROFILE SYSTEM MAIN SELECTORS

eggplant

These are the most commonly used selectors.

body - The whole page pretty much. You would use this to edit the main background.

.panel - Editing this will affect ALL panels on the page at once. Panels are the sections like About, Comments, Details, etc.
.panel h2 - This affects ALL of the headers on the panels at once. The headers of the panels are the normally blue bars at the top of each section that tells what the panel is.

a - This affects ALL of the links on the page.
a:hover - This affects how all of the links on the page look when hovered over.

#column_1 - The first horizontal row of panels on your profile.
#column_2 - The second horizontal row of panels on your profile.
#column_3 - The third horizontal row of panels on your profile. This is only accessible on higher resolutions.
#columns - All of the columns.

.user_info_popup - The box that shows up as a dropdown.

:hover - Adding this will change how a section looks when you hover over it. I.E. if you have #id_comments set to an opacity of .5 and #id_comments:hover set to an opacity of 1, the section will originally be slightly visible but change to full visibility when hovered over.

Hovers do not work in IE6 and below. It is also not advisable to use hovers on a media panel; that will cause the media panel to reload and therefore not play properly.


CURRENT PROFILE SYSTEM PANEL SELECTORS

fig

These are the specific selectors for each panel.

To edit the header of a panel, you just add "h2' to it. I.E. the header of the About panel is #id_about h2. Likewise, to edit the links in a panel, you would just add "a"; i.e. #about a would affect only the links in the About panel. I would write them all out but I think it would just clutter the thread.

In addition to "h2" and "a", you can also add "img". "img" will affect only the images in that panel. For example, #id_signature img would affect only images in your signature panel.

#id_about - The panel with your About Me content. You can edit the About Me content under My Gaia --& Account --& About Me.

#id_details - The panel with your avatar on it. It also contains your stats like registered date, last login, etc. and your personal information like your birthday.
#id_details img - You can use this selector to edit your avatar in the details panel.

#id_contact - The panel that had the "Add to Friends/Ignored", "Send Message", and "Trade Items" links.

#id_equipment - The panel with a list of the items that you currently have equipped.
#id_equipment .item - Use this if you want to affect only the items in the panel, and not the panel overall.
#id_equipment .item img - Use this if you want to affect only the individual items.

#id_playlist - The panel with your playlists.

#id_badges - The panel with your zOMG badges.
#id_badges .clickable - The individual badges.

#id_wishlist - The panel with a list of the items on your wishlist.
#id_wishlist .item - Use this if you want to affect only the items in the panel, and not the panel overall.
#id_wishlist .item img - Use this if you want to affect only the individual items.

#id_mycar - The panel with your car in it.

#id_interests - The panel with your interests listed.
#id_interests h3 - The heading of each section of interests; I.E. "Favorite Movies/Anime", "Favorite TV Shows", etc.
.interest_tags - The lists (links) of all of your interests.

#id_signature - The panel displaying your current signature.

#id_gifts - The panel that shows any gifts you have received.

#id_store - The panel with your store in it.

.media_panel - The panel with your media in it. If you have more than one media and want to change a specific one, you would treat it like a custom section (explained in the next post).

#id_house - The panel with your house in it.

#id_forum - The panel displaying your forum stats I.E. your total number of posts and your average number of posts per day.

#id_footprints - Also referred to as the "recent visitors" panel; it shows users who have come to your profile.

#id_guilds - The panel displaying the guilds you are currently a member of.

#id_journal - The panel with your journal in it.
#id_journal p a - The "View Journal" link.
#id_journal ul - The links to entries in your journal.

#id_friends - The panel that shows all of your Gaia friends.
#id_friends ul img - The heads of your friends. NOTE: Any edits you make to this will affect the ? icon as well. To undo this, you can apply different properties to the ? icon alone using the next selector.
#id_friends .user_info img - The ? icon.

#id_comments - The panel that displays all of your comments.
#alert_container - The Add Comments button.
#id_comments .user_info img - The little ? icon next to a commenter's username.
#id_comments .avatar - The avatar/head of your commenter.
#id_comments .date - The date listed on each comment.
#id_comments dt - The username, ? icon, and date of each comment. This also contains the line that separates these things from the actual comments.
#id_comments dd - The actual comments themselves and the avatar/head of the commenter.

CURRENT PROFILE SYSTEM HEADER SELECTORS

grape

This is for the black bar at the top of the profile that has the Gaia logo and My Gaia/Community/etc. links.

Before editing this, please read the Profile Discussion Rules & Guidelines. The fourth post ("Reporting violations in a Profile" wink has a section about altering the navigation bar. Make sure you don't break any of these rules.

If any properties do not work on these selectors, try adding !important after them. I.E.:
#gaia_header li{color: #FFFFFF !important;}

However, try not to put them on unless you find it to be necessary.

Now onto the selectors...

#gaia_header - The navigation bar overall. I usually use this if I'm adding a border to the botto mof the navigation bar.
#gaia_header a - All of the links in the header.
#gaia_header, #gaia_header * - If you want to edit specific parts of the gaia header, like the background color or the font family.

#header_left - The left side of the navigation bar.
#header_left img - The Gaia logo.

#header_right - The right side of the navigation bar.

[KayleyV2]

kiwi

Custom sections make it a bit more tricky to get the selectors. You have to find them yourself.

To find the selector for a custom section, view your profile after adding the custom section. Right-click on the page or go to View and click on "View Page Source".

Scroll down the source page and find something like this:



You would take the part in red and add a # to it. That would make it a selector.

In the case of the image shown above, the selector for the custom panel is #id_custom_11988.

If you don't want to scroll down the whole page to find the ID, you can just use CTRL+F and search for "custom_panel". That should take you straight to it.

Media panel IDs are similar, except it would look something like #id_media_11988 and you would search for "media_panel" instead of "custom_panel".

This also works for custom text and images placed using the Editor.

Gaia Online user Telep Undomian suggested the Firefox extension Aardvark to help identify sections.

[KayleyV2]

lemon

RECAP TIME
This is the basic format for a CSS code:
selector{property: value;}

For example, in this code:
#id_comments{height: 234px;}
#id_comments is the selector.
height is the property.
234px is the value.

In the previous post, I gave a list of selectors. Now I will give a list of the part of the code that contains the property and value. To use them, you just need to edit the parts in red.

NOTE: If you have the same selector for two different codes, you can combine the codes.

I.E. if you have:
#id_comments{width: 243px;}
#id_comments{height: 482px;}

You could rewrite it as:
#id_comments{width: 243px; height: 482px;}

It is recommended to do this whenever possible because it makes it easier for you to edit your code.
_______________________________________________

LIST OF SPECIFIC CODES
_______________________________________________

orange

There are two list of codes in this post: a list of specific codes and a list of basic codes. Basic codes can be applied to almost any selector to create different effects; specific codes are applied to a specific selector to create a certain effect. I will make a list of the specific codes first; the list of basic codes is right after the list of specific codes.

ADDING A PAGE BACKGROUND
html, body{background: url(imageurlhere);}
This is the most popular way to add a background image to a page. This is the very base of the code; I recommend reading the "BACKGROUND IMAGE EXTENDED" section higher up in this post to learn about more ways to customize the background image.
_______________________________________________

CENTERING YOUR PAGE
#columns{width: ##px; margin-left: auto; margin-right: auto; float: none; position: relative; top: 0px;}
This code will center your entire profile. You need to edit the ##. A common number to use for this code is 760.
_______________________________________________

ADJUSTING MEDIA SIZE
.media_panel embed, .media_panel object{height: ##px; width: ##px;}
This is the code you would use if you want to make your multimedia bigger or smaller. Just edit the ## to make the media change size.
_______________________________________________




Below is the list of basic codes. There are codes that can be applied to almost any selector to create a variety of outcomes.
_______________________________________________

LIST OF BASIC CODES
_______________________________________________

strawberry

HEIGHT
selector{height: ##px;}
This code edits how long a section is. Where there is a ##, you will add a number for how high you want the section to be. If you are new to this, try experimenting with random values until you get an idea of how big numbers are.
_______________________________________________

WIDTH
selector{width: ##px;}
This code edits how wide a section is. Where there is a ##, you will add a number for how wide you want the section to be. As with the height, if you are new to this, try experimenting with random values until you get an idea of how big numbers are.
_______________________________________________

TEXT COLOR
selector{color: hexcode;}
This code edits the color of all text in a section, excluding links. Where it says "hexcode", you can use one of the hexcodes listed in the following post, or you can use a color name like "black" or "pink".
_______________________________________________

TEXT SIZE
selector{font-size: ##px;}
This code edits how large the text in a section is. The default font-size is 10px.
_______________________________________________

FONT FAMILY
selector{font-family: fontname;}
This code edits the type of font used in the section. Just replace "fontname" with then name of the font, I.E. .panel{font-family: verdana;}. When you are using this code, try to stick to normal fonts, and stray away from eccentric fonts. Changing the font will only work if the user viewing your profile has that font installed on their computer, which is why you should stick to default fonts like Verdana and Times New Roman.
_______________________________________________

REMOVING BACKGROUND
selector{background: transparent;}
This code will make it so the section does not have a background.
_______________________________________________

BACKGROUND COLOR
selector{background: color;}
This code will add a color background to the section. Like always, you can use a hex code for the color or a color name. A list of hex codes is given in the next post.
_______________________________________________

BACKGROUND IMAGE
selector{background: url(imageurlhere);}
This code will add an image background to the section. If you have an image that you would like to use, upload it to a site like Photobucket. Then copy the "direct URL" and paste it where it says "imageurlhere" in the code.

BACKGROUND IMAGE EXTENDED
There are a lot of different codes that you can use when adding a background image.

There are repeats like repeat, no-repeat, repeat-x, and repeat-y. You would add these at the end of the code, I.E. selector{background: url(imageurlhere) no-repeat;}. Repeat makes the background repeat in all directions. No-repeat makes the background not repeat at all. Repeat-x makes the background repeat horizontally. Repeat-y makes the background repeat vertically.

The are positioning codes for backgrounds, like top, left, right, bottom, center. They are added to the end of the code like repeat codes. You can combine some of them like "top left" and "bottom left", but you can't combine others like "center right" or "top bottom". Many of these are self-explanatory, but you can always try each combination out to see if it works.
_______________________________________________

OPACITY
selector{opacity: .8; -moz-opacity: .8; filter:alpha(opacity=80); -khtml-opacity: .8;}
This code makes the section see-through but still visible. You can edit the numbers in green if you want to make the section more or less visible.
_______________________________________________

SCROLLBARS
selector{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: ##px;}
This code adds a scrollbar to the section. Edit the ## with how long you want the section to be before it starts to scoll.

I have a guide for hidden scrollbars here.
_______________________________________________

POSITIONING SECTIONS.
selector{position: relative; left: ##px; top: ##px;}
Positioning in v2/current can be tricky. You need to specify the height and width; if you don't, the section will collapse.

There are other ways of positioning like using absolute positioning, but this is usually more efficient. If you really want to know about that, reply to this thread with a specific question about what you are trying to do.

Note: You may also need to use these codes when positioning..
#column_#{width: ##px;}
#column_# .panel{width: ##px;}

The first code makes the column that your panel is in big enough to adapt to the position change. If your panel is in the first panel, it is in #column_1, so on so forth (check the Selectors post for all of the columns). For the width, you can usually put the size of the panel you are using plus the amount of space you are moving it.

These are the default panel widths for columns:
#column_1 - 230px
#column_2 - 500px
#column_3 - 230px

So if you were moving a panel in column one 200px, you would put a width of 700 or 750.

The second code in the additional code section is to circumvent the column resize for any other panels in that column (this may not apply). If you want to move just one section and keep the rest of the panels the same size, you would just put the default panel width for that column as the width.
_______________________________________________

MARGINS
selector{margin: top##px right##px bottom##px left##px;}
This adjusts the area around your panels. The first number adjusts the margin from the top, the second number adjusts the margin from the right, the third number adjusts the margin from the bottom, and the last number adjusts the margin from the left.

I.E. #id_about{margin: 30px 20px 40px 20px;}
There would be a 30px margin on the top, a 20px margin on the right, a 40px margin on the bottom, and a 20px margin on the left.

The default margins for v2/Current profiles are as follows: {margin:-5px -5px 10px -5px;}

Therefore, if you want to edit three margins at once but leave one the same, you would put the value in the code above, not 0px.

I.E. if you wanted to add a 30px margin to all sections except the bottom: .panel{margin: 30px 30px 10px 30px;}

If you're only adding one margin - like if you want to add only a margin to the top - then you can use a different property. There are four other main margin properties: margin-top, margin-left, margin-bottom, and margin-right. Margin-top and margin-left are most commonly used. Editing only these will cause the margin to appear only in that area.

I.E. #id_comments{margin-top: 15px;} would put a margin of 15px on top of the comments section. It wouldn't add or change any other margins.
_______________________________________________

BORDERS
selector{border: ##px type color;}
There are three main components of a border code. The size, type, and color. You do not need to use all of these.

Colors are listed in the next post. Like always, you can use names or hex codes.

The main border types are: solid, dotted, and dashed. There are some others that you can use; if you really want them, you can use Google to find out what they are.

Like always, ## is just how big you want the border to be.

Example of a border code: .panel{border: 1px dotted #FF0000;}

You can put {border: none;} if you want to get rid of a border on a section that already has one.

BORDERS EXTENDED
There are many common variations on borders. For example, border-top, border-right, border-left, and border-bottom. These are pretty self-explanatory once you know what they mean. Border-top adds a border only on the top, border-right adds a border only on the right, etc. The normal border property adds a border around the whole object.
_______________________________________________

DELETING
selector{display: none;}
This code hides content. For example, if you want a Friends panel but not the Find Friends button, you can use #find_friends_banner{display: none;} to get rid of it.
_______________________________________________

If you want to check out more CSS properties, I recommend browsing Blooberry's CSS Property Index.

[KayleyV2]

watermelon

I was going to create an image with common hex codes, but there are plenty of hex code lists on the internet so I found it unnecessary.

Hex codes for the most common Gaia Online colors...
Black: #000000
White: #FFFFFF
Red: #FF0000
Blue: #0000FF
Purple: #800080
Pink: #FFC0CB
Green: #008000
Orange: #FFA500
Brown: #A52A2A

If you want more, Gaia user labyrinths has composed a neat list of all of the color names and their corresponding hex codes. You can view her list here.

[KayleyV2]

yam

LINKS IN
If you found this guide helpful in anyway (even if you didn't use it), please put a link to it somewhere on your profile.

I've created a variety of ways that you could link here. Copy the code below each example if you want to use that type of link.

I might make new graphics later because these ones aren't too great. They're fine for now though; this is a coding guide, not a graphics guide.

Text Link
How to Code a v2/Current Profile Guide
[url=http://www.gaiaonline.com/forum///t.42151201_1/]How to Code a v2/Current Profile Guide[/url]
_______________________________________________

50x50px button (can be used as a patch)

[url=http://www.gaiaonline.com/forum///t.42151201_1/][img]http://tinyurl.com/5rb33p[/img][/url]
_______________________________________________

88x31px button

[url=http://www.gaiaonline.com/forum///t.42151201_1/][img]http://tinyurl.com/56myqe[/img][/url]
_______________________________________________

200x40px banner

[url=http://www.gaiaonline.com/forum///t.42151201_1/][img]http://tinyurl.com/6pcw8n[/img][/url]
_______________________________________________

500x300px banner (this has been optimized so that it works in signatures)

[url=http://www.gaiaonline.com/forum///t.42151201_1/][img]http://tinyurl.com/6bxrff[/img][/url]

LINKS OUT

Add my link to your thread and then reply to be added.

Catalyst: A Rating Thread

[KayleyV2]

THE END.

Feel free to reply with any questions and/or comments you may have regarding this guide.