[GUIDE] Learn How To Code v2/Current Profiles

[kittymmeow]

xWHORE-ible

I'm going to sounds ridiculous- mainly because I'm sure it's been posted before and I apologize- but how can I change the light blue color on my headers?
Whenever I found a code, it would just change the font in my headers from white to a different one. Everything else I wanted seemed to work fine- just that blue won't go away. I'm trying to make it as if it's not there at all.
Augh sorry. I'm stupid. x_x

The code you keep trying is to change the color of the text of the headers, that's what the color property does. The blue is actually a background, so you have to use the background property instead:

.panel h2{
background:COLOR;
}

You can of course use a color there (hex code, RGB/RGBA, or color name), but you may also use an image instead (so the background could be striped or something) by switching COLOR to url('your image url here')

[xWHORE-ible]

kittymmeow

xWHORE-ible

I'm going to sounds ridiculous- mainly because I'm sure it's been posted before and I apologize- but how can I change the light blue color on my headers?
Whenever I found a code, it would just change the font in my headers from white to a different one. Everything else I wanted seemed to work fine- just that blue won't go away. I'm trying to make it as if it's not there at all.
Augh sorry. I'm stupid. x_x

The code you keep trying is to change the color of the text of the headers, that's what the color property does. The blue is actually a background, so you have to use the background property instead:

.panel h2{
background:COLOR;
}

You can of course use a color there (hex code, RGB/RGBA, or color name), but you may also use an image instead (so the background could be striped or something) by switching COLOR to url('your image url here')

Ahh thank you so much! You're a god! (:

[Leo Keikei]

kittymmeow

Leo Keikei

kittymmeow

Leo Keikei

im not sure if you know this code but when I clicked on this profile my avi popped up on their profile surprised can you please tell me the code if you know them 4laugh

It's been kinda an ongoing confusion about whether that's even allowed or not, but I think it's leaning in the direction of not being allowed, so I won't give you it (partially since I don't even know it) and don't suggest you use it either, even if you find it elsewhere

aaah really? surprised

Yup :/ It's kinda explained here why it isn't (or shouldn't be) allowed. Plus of course the fact that it sometimes scares people when they see their avi on some random person's profile XD

true lol

[Lady Trombone]

I was wondering, is there anyway to specifically change the color of each link under the Gaia header?
I know the code to change all the links is (#gaia_header a), but I wanted to color my links so that they're alternating.
(Something like this: My Gaia | Shops | Forums | World | Games)

Thanks for your help!

[Tragically Hipster]

TrOmBoNe_FrEaK

I was wondering, is there anyway to specifically change the color of each link under the Gaia header?
I know the code to change all the links is (#gaia_header a), but I wanted to color my links so that they're alternating.
(Something like this: My Gaia | Shops | Forums | World | Games)

Thanks for your help!

Yup, as long as each link has an ID in it; for example:

<a href="some random url" id="This is the important part">Blah</a>

Id's are only for one thing. You might find something like this:

<a href="some random url" class="this is something totally different.">Blah</a>

Classes are used for multiple things. You can find them being used for a "wrapper," and heading styles.

I looked at my nav bar and found this code for the My Gaia link.

<a href="/mygaia/" id="yui-gen7">My Gaia</a>

So, to answer your question, yes you can change each link.

There is also another way to do it by using the "nth child," and it's counterpart selectors. This part I'm may need a correction from someone ,,, Anyway ...

#gaia_header a:first-child{
color:#fff;
}

#gaia_header a:last-child{
color:#000;
}

Those two are a bit self explanatory,
with straight "nth-child:"

#gaia_header a:nth-child(1){
color:#fff;
}
#gaia_header a:nth-child(2){
color:#000;
}
#gaia_header a:nth-child(3){
color:#ff0000;
}
#gaia_header a:nth-child(4){
color:#fff000;
}

That should be the first link, second, third, and forth. There are also a bunch of different ways to do "nth-child" stuff, like only selecting the odd or evens, prime, every 13th, so on and so on. That though is a bit of "math to do something spiffy like that. Anyway, there's a bit more info on it at W3 Schools.

Sorry for lots of stuff, but I like to give people options on doing things.

[Oni_Nekomaru]

KayleyV2

THE END.

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

The bird of the hermes is my name...

Is there a way to enlarge a picture? I'm having a really hard time getting a certain picture to fit on my profile. And photobucket won't do crap if I upload a big picture to it and then link the photobucket link.

...eating my wings to make me tame.

[I-Unnie-I]

Hmm. Is there a way to hide the drop down menu bar and the online status thing on the content 'detail' ? Like just the avatar therE?

[kittymmeow]

Oni_Nekomaru

KayleyV2

THE END.

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

The bird of the hermes is my name...

Is there a way to enlarge a picture? I'm having a really hard time getting a certain picture to fit on my profile. And photobucket won't do crap if I upload a big picture to it and then link the photobucket link.

...eating my wings to make me tame.

If you're putting it as a background image you can resize it with CSS. If you are just uploading it and linking to it or something (or even for background images as well, if you want them full-size), I suggest you use another image hosting site (Imageshack is my personal favorite). Photobucket won't upload huge images, it automatically resizes them if they're too big. And it depends how big you want it anyway, if it's a background image it really shouldn't be more than 1600px wide, since most people's screens are that big or smaller anyway. If it's like 3000x2000px, you should make it smaller anyway and then upload it to Imageshack to avoid Photobucket's automatic resizing.

For making a background image automatically fit the screen no matter the screen resolution (which can be a good idea so the image doesn't either get cut off if it's too big or have big empty spaces if it's too small), put this in your CSS:

html,body{
background:url('your image url here') ;
background-size:cover;
}

[Oni_Nekomaru]

kittymmeow

Oni_Nekomaru

KayleyV2

THE END.

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

The bird of the hermes is my name...

Is there a way to enlarge a picture? I'm having a really hard time getting a certain picture to fit on my profile. And photobucket won't do crap if I upload a big picture to it and then link the photobucket link.

...eating my wings to make me tame.

If you're putting it as a background image you can resize it with CSS. If you are just uploading it and linking to it or something (or even for background images as well, if you want them full-size), I suggest you use another image hosting site (Imageshack is my personal favorite). Photobucket won't upload huge images, it automatically resizes them if they're too big. And it depends how big you want it anyway, if it's a background image it really shouldn't be more than 1600px wide, since most people's screens are that big or smaller anyway. If it's like 3000x2000px, you should make it smaller anyway and then upload it to Imageshack to avoid Photobucket's automatic resizing.

For making a background image automatically fit the screen no matter the screen resolution (which can be a good idea so the image doesn't either get cut off if it's too big or have big empty spaces if it's too small), put this in your CSS:

html,body{
background:url('your image url here') ;
background-size:cover;
}

The bird of the hermes is my name...

Thank you so much!! cat_4laugh

...eating my wings to make me tame.

[C r s y l]

This thread is a great help -thumbs up- xD

[C r s y l]

I added a scrollbar on my column and I'm trying to make it hidden but it seems I can't do it..I'm so confused of the selector 2 thingy..can anyone help me..please
This is my code:

#columns{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 430px;}

what should I add to make it hidden?

[kittymmeow]

C r y s l

I added a scrollbar on my column and I'm trying to make it hidden but it seems I can't do it..I'm so confused of the selector 2 thingy..can anyone help me..please
This is my code:

#columns{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 430px;}

what should I add to make it hidden?

It's less like "what should you add"and more like "what you should change entirely". Invisible scrollbars are one of the more annoyingly confusing things that a lot of Gaians seem to try to deal with on their profiles, especially with the terrible quality of that guide. It's even more difficult when you are trying to hide the scrollbar for something that isn't explicitly described in the guide; That requires knowing how hidden scrollbars work, which the guide doesn't explain at all and isn't the easiest thing to figure out on your own if you don't know CSS– and the guide's bad code and bad descriptions didn't help at all.

I made a gif demonstrating how hidden scrollbars work and what selector and selector 2 refer to but it seems to be having problems at the moment so I guess I'll just post it later if it decides to work, and for now a written explanation will hopefully do. A hidden scrollbar is made up of an inner element and an outer element. Outer element is what the guide called "selector", inner element is "selector 2". The scrollbar is still there, on the inner element, but the padding that you add actually just pushes the scrollbar outside of the outer element so you can't see it anymore. Everything beyond the outside of the outer element will be invisible– including the scrollbar after it's been pushed out.

The base code:

outer element selector{
overflow:hidden;
}
inner element selector{
overflow-y:scroll;
overflow-x:visible;
padding-right:50px;
height:##px;
width:100%;
}

To make a hidden scrollbar for the main columns, #columns would be the outer element and #column_1 would be the inner element; however, the code has to be a little different for the main columns because Gaia has set a margin on the inner element that will make some of the content cut off if you don't remove it.

The code you should actually use:

#columns{
overflow:hidden;
}
#column_1{
overflow-y:scroll;
overflow-x:visible;
padding-right:50px;
margin-left:0px;
height:450px;
width:100%;
}

[Knight Yoshi]

TrOmBoNe_FrEaK

Tragically Hipster

TrOmBoNe_FrEaK

I was wondering, is there anyway to specifically change the color of each link under the Gaia header?
I know the code to change all the links is (#gaia_header a), but I wanted to color my links so that they're alternating.
(Something like this: My Gaia | Shops | Forums | World | Games)

Thanks for your help!

Yup, as long as each link has an ID in it; for example:

<a href="some random url" id="This is the important part">Blah</a>

Id's are only for one thing. You might find something like this:

<a href="some random url" class="this is something totally different.">Blah</a>

Classes are used for multiple things. You can find them being used for a "wrapper," and heading styles.

I looked at my nav bar and found this code for the My Gaia link.

<a href="/mygaia/" id="yui-gen7">My Gaia</a>

So, to answer your question, yes you can change each link.

There is also another way to do it by using the "nth child," and it's counterpart selectors. This part I'm may need a correction from someone ,,, Anyway ...

#gaia_header a:first-child{
color:#fff;
}

#gaia_header a:last-child{
color:#000;
}

Those two are a bit self explanatory,
with straight "nth-child:"

#gaia_header a:nth-child(1){
color:#fff;
}
#gaia_header a:nth-child(2){
color:#000;
}
#gaia_header a:nth-child(3){
color:#ff0000;
}
#gaia_header a:nth-child(4){
color:#fff000;
}

That should be the first link, second, third, and forth. There are also a bunch of different ways to do "nth-child" stuff, like only selecting the odd or evens, prime, every 13th, so on and so on. That though is a bit of "math to do something spiffy like that. Anyway, there's a bit more info on it at W3 Schools.

Sorry for lots of stuff, but I like to give people options on doing things.

Wrong. The #header_left and #header_right are unordered list elements with list items, the anchors are within the list items. The rules you posted will not work

#gaia_header a:nth-child(1){
color:#fff;
}
#gaia_header a:nth-child(2){
color:#000;
}
#gaia_header a:nth-child(3){
color:#ff0000;
}
#gaia_header a:nth-child(4){
color:#fff000;
}

The #gaia_header a:nth-child(4) for instance is not a 4th child, it's a first (and only) child of the fourth list element.
Secondly, you don't have to use the nth pseudo class. You can also use attribute selectors, which is what I would recommend in this case. For instance

#gaia_header a[href='/mygaia/']

which would select any anchor within the element that has the id "gaia_header" that has an href exactly matching /mygaia/. Really though at that point even the #gaia_header is irrelevant, you can simply say

a[href='/mygaia/']

which will match any anchor element on the page with the href of /mygaia/ and since only the navigation has it, that will work just fine

[C r s y l]

kittymmeow

Thanks for the help...I super duper appreciate it..I like to learn more about this coding..I just started coding my profile just recently..cause I find it interesting..and confusing at the same time xD but super thanks again..I finally achieve what I wanted ^^

[M i n t s u T e a]

How can i make the edges in my About me & etc round?
: o