[GUIDE] Learn How To Code v2/Current Profiles

[once in a moon]

buxom filly

omg lmao...

try fixing the width in this code.

#id_about{background: #afcbe8;
overflow: scroll; overflow-x: hidden; overflow-y: auto; width: 50px; height 50px;
opacity: .2; -moz-opacity: .2; filter:alpha(opacity=20) -khtml-opacity: .2; }

i also suggest for you to edit the height too, since you might run into a similar problem.

[Tantooden]

main vocal

that's weird, yt videos should still be able to play by themselves when you hide them. i'm certain there's something wrong with your codes since they look a little off anyway... specifically these ones.
.panel h2{background:}
.media_panel{background:}

since you're not doing anything with them, i advise you to erase them from the css.

oh & i just noticed this - i think the main reason why your media isn't working is because of the code you just added in. if you want to hide it, you don't put "display:none" that's getting rid of something completely. i suggest instead that you use the positioning code which kayley explained here (ctrl+f type in 'position'). good luck!

Thank you for the guidance was missing that code and that was messing with the hidden code and then with the autoplay razz somehow?

[Ateru Skye]

Might anyone have a basic code, so that you're ablet o change the color of the panels and hide the media panel?

Also, how do I change link color? When I had that ode, the link for my comments dd not show up.

[that_one_stalker]

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;}

i didnt understand instructions right i lost my left leg and my brothers gone

[archer-27th]

do you know how to make border style?

[Double Switch]

I have been racking my brain trying to get the space between the Gaia header and the panels to go away.
I don't need that much space up top being empty.

[MasterDeathTeddy]

Some of the codes do not work at all. I tried it. Is there a reason for it? Below is one of them. Why doesn't it do what you say it does?

Quote:

#find_friends_banner{display: none;}

[once in a moon]

Ateru Skye

when you say change the color of the panels, you mean the bg color right? i simply copied this from the first page, so here.

selector{background: color;}

the 'selector' in this case would be .panel

hiding the media player isn't hard, you just have to play with the positioning codes (control f+positioning).

to alter link colors, you just simply use this code
.panel a{color: ######;}

###### - you can put any kind of color there.

Heart_of_Quincy

.panel {border: style ###### ##px}

style - this represents the different border types, for example you can use 'dotted' and you'll have dots around your panels. you can read more about it here.

###### - pretty simple, just the hex color codes or in other words the color.

##px - the thickness of the borders.

good luck!

Double Switch

try this code...

#columns {top: ##px;}

hopefully this was what you were looking for^^

Trainer Erkal

something about that code looks off, but then again it's been a while since i've played with css... may i ask where you got it from?

[Tomo Kaneko]

Our Sea

caprecorn

What is the code for when you scroll over something it expands and shows the whole thing?
I saw it awhile ago on someone's profile thought it was neat and very minimalistic.

oh, here's the code:

.panel{
length: 310px;
width: 310px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
.panel:hover{
length: 400px;
width: 400px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}

you can change the red numbers to adjust size of panels
you can change the green numbers to affect the speed
you can change blue selectors to adjust which panels you want to "affect"

Is it possible to change the transition so the panels would fade from translucent to opaque when you hover your mouse over them?

[MasterDeathTeddy]

main vocal

Trainer Erkal

something about that code looks off, but then again it's been a while since i've played with css... may i ask where you got it from?

I got it from the dang tutorial on page 1. Also, it may not be the only thing on there that doesn't work when I try it. For me I just expect the codes to work as it is a tutorial. I must be learning false information then. Why am I here?

Edit:Thanks for not helping me. I still didn't get my problem solved. I know it has been a while for you, but at least respond instead of ignoring me.

[Double Switch]

main vocal

Double Switch

try this code...

#columns {top: ##px;}

hopefully this was what you were looking for^^

Yes, it was.
Figured it out the other day, but thank you.

[archer-27th]

wow thanks
it help
can i ask again?

[Indecisive Name]

the code to center your content doesn't work correctly on my profile; it makes both columns collide into a single, long one. Is there any way to separate the columns, AND center it at the same time?

Moreover, I'm looking for a good code that can keep my background image still while scrolling; supposedly, the reason why it wouldn't was because it doesn't work on IE8 (Internet Explorer), and that IE9 had to be installed. So I did that and nothing changed. So then, what could I do?

Thanks for the replies

[-sephyrie-]

Thanks very much for this guide!

My profile isn't wonderful, but this guide has helped me simplify it a lot heart

[Spectacularism]

Sanctus Legionis

the code to center your content doesn't work correctly on my profile; it makes both columns collide into a single, long one. Is there any way to separate the columns, AND center it at the same time?

Moreover, I'm looking for a good code that can keep my background image still while scrolling; supposedly, the reason why it wouldn't was because it doesn't work on IE8 (Internet Explorer), and that IE9 had to be installed. So I did that and nothing changed. So then, what could I do?

Thanks for the replies

body {background-attachment: fixed;}