[GUIDE] Learn How To Code v2/Current Profiles

[Owlsomniac]

I have a question I hope someone can help me with, assuming I don't discover it somehow on my own first xD; but I've been trying for the past 20mins to no avail...


actually, it's a few questions

1. if I have a custom background image that is about 600px in height, but is being cut off a bit at the bottom, is it possible for me to have it not get cut off? I can't set it to repeat because it's a custom image I drew myself.
solution

I realized I had to change the height of the #id_about to the same height as the image to make it work.

2. I want to add links to the bottom of the 'image' that go to my posts, 'friend me' option, 'pm' option, etc. How do I do that?

3. How would I add links for 'view comments' and 'add comment'?

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧

Owlsomniac

I have a question I hope someone can help me with, assuming I don't discover it somehow on my own first xD; but I've been trying for the past 20mins to no avail...


actually, it's a few questions

1. if I have a custom background image that is about 600px in height, but is being cut off a bit at the bottom, is it possible for me to have it not get cut off? I can't set it to repeat because it's a custom image I drew myself.
solution

I realized I had to change the height of the #id_about to the same height as the image to make it work.

2. I want to add links to the bottom of the 'image' that go to my posts, 'friend me' option, 'pm' option, etc. How do I do that?

3. How would I add links for 'view comments' and 'add comment'?

1. Alternatively, you could have also set background-size: cover; to make the background image fit just right.
   
2. You cannot insert hyperlinks in using CSS, so you would need to either edit that panel and link things in there with BBCode or make them floating text decorations.
   
3. Same method as above, or you can add a Comments panel and put this into your theme override:
   #id_comments dt:nth-of-type(n+1) , #id_comments dd:nth-of-type(n+1) {display:none;}
   

▧▧▧▧▧▧▧

[Eauo]

Lady Saxophone

▧▧▧ ♬ ▧▧▧

Owlsomniac

I have a question I hope someone can help me with, assuming I don't discover it somehow on my own first xD; but I've been trying for the past 20mins to no avail...


actually, it's a few questions

1. if I have a custom background image that is about 600px in height, but is being cut off a bit at the bottom, is it possible for me to have it not get cut off? I can't set it to repeat because it's a custom image I drew myself.
solution

I realized I had to change the height of the #id_about to the same height as the image to make it work.

2. I want to add links to the bottom of the 'image' that go to my posts, 'friend me' option, 'pm' option, etc. How do I do that?

3. How would I add links for 'view comments' and 'add comment'?

1. Alternatively, you could have also set background-size: cover; to make the background image fit just right.
   
2. You cannot insert hyperlinks in using CSS, so you would need to either edit that panel and link things in there with BBCode or make them floating text decorations.
   
3. Same method as above, or you can add a Comments panel and put this into your theme override:
   #id_comments dt:nth-of-type(n+1) , #id_comments dd:nth-of-type(n+1) {display:none;}
   

▧▧▧▧▧▧▧

This is pretty helpful for me as well, I've been trying to make my own custom one for ages. XD thanks

[Soul EaterSoul Eater]

the code to remove avatar from your details panel, is it not

#id_details img{display:none;}

???
Because that used to work but now it doesn't seem to. Or did gaia make it now impossible to edit that?
I've even tried the opacity code and set it to 0, and still it doesn't affect it.

[Zyqi]

Lady Saxophone

▧▧▧ ♬ ▧▧▧
Change that comma after "center" to a semicolon --
html, body{background: url(http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg) no-repeat center; background-size: cover; background-color: #000000;}
You need a semicolon to separate each property you code c;

▧▧▧▧▧▧▧

Can I just butt in here and give you a enormous thank you for this tidbit of code? It's fixed my space background.
emotion_hug emotion_bigheart emotion_bigheart

[MoldyWoman]

how would I put CSS coding from a website like W3schools.com into this?

(I am trying but failing, all I want is one centered transparent box with a scroll bar and text... I am so lost....)

Edit: basically like this this profile

[Confelicity]

The Angelmaker

It still works, but since your avatar has an animated item, it uses flash, so it has its own selector. Use #animated_item in addition to #id_details img.

[Soul EaterSoul Eater]

Confelicity

The Angelmaker

It still works, but since your avatar has an animated item, it uses flash, so it has its own selector. Use #animated_item in addition to #id_details img.

worked now

[hi its magna]

need help with my profile please help i will pay gold!

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧

Hello Im Angel

need help with my profile please help i will pay gold!

This guide is majorly outdated, so you won't get much help in here ^^;
Instead, why not make a thread and clearly describe what exactly you need help with?

▧▧▧▧▧▧▧

[Gothic]

Hey, I have no idea if this thread is still running but I've found some very useful things here.
I was wondering if there's any way to give your columns different positions.
So far, if I try to split my columns, the code just breaks and they disappear.
Can they ONLY be beside one another? They can't have different top - bottom positions?
Let's say I want my colums in a triangle shape (Which IS what I'm trying to do)
Like

Column 1


Column 2........................................................................................Column3

[Zhro]

AngelSuey

Hey, I have no idea if this thread is still running but I've found some very useful things here.
I was wondering if there's any way to give your columns different positions.
So far, if I try to split my columns, the code just breaks and they disappear.
Can they ONLY be beside one another? They can't have different top - bottom positions?
Let's say I want my colums in a triangle shape (Which IS what I'm trying to do)
Like

Column 1


Column 2........................................................................................Column3

Sure it's possible.
I kinda did this.

#column_1 {
position: absolute;
background: #rgba(0,0,0,0.4)
color:#297ACC;
font-family: Verdana;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
opacity: 1;
top:70px;
left: 50px
}
#column_2 {
position: absolute;
background: #rgba(0,0,0,0.4)
color:#297ACC;
font-family: Verdana;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
opacity: 1;
top:-50px;
left: 300px
}
#column_3 {
position: absolute;
background: #rgba(0,0,0,0.4)
color:#297ACC;
font-family: Verdana;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
opacity: 1;
top:70px;
left: 800px
}

I just changed the top values depending on how steep I wanted the 'triangle' and the left value depending on how wide I wanted the triangle.

EDIT: Oh and add this as well so that stupid transparent border doesn't bother you.

#columns, #column_1, #column_2, #column_3{overflow:visible;}

[TheNexus707]

This was actually helpful. thanks