[GUIDE] Learn How To Code v2/Current Profiles

[Electstatic]

Radiocarbon

Toxicraze

TOXICRAZE
Okay.Is it possible to make 1 border for two sections ? >//>

What exactly do you mean? Like, two sections merged together with a border that makes them look like one big section?

Yup.Like that.

[Electstatic]

TOXICRAZE
I also need help on the underlining when you hover over the gaia links.
View my profile,and hover over the gaia header links.I want it to be a underline there. :'3

[Electstatic]

TOXICRAZE
Uhm,also need help on getting my sections all the way at the top. >//>'
You know like Gaia Central ? They put their sections all the way to the top. > o <;

[radiocarbonn]

#columns{top:40px;}
a:hover{text-decoration:underline !important;}
.media_panel{top:-10px; border:#000000 1px solid; border-top:none;}
#id_about{border:#000000 1px solid; border-bottom:none;}

That should take care of it. Change the border styles to whatever you want, and you can mess with the #columns properties to get everything the height you want it to be from the top.

[Melchiore]

For Tom Skelton, Classic type profiles don't have the option to make "custom sections" on their own. You'll have to "code" one in using your about me section. Here is a guide that may help you. =)

For Toxicraze,

1. You can use positioning to put the two sections together then have their background colors the same and place a border around the top, bottom and left or right (according to which section is on the left and vice versa)
   If I were to be using my about section and a custom section I would do something like this (imagine that they are at the top-most, left-most area of the screen.)
   

   Code

   #id_about /* on the left */
   { width: 300px; height: 500px; position: absolute; top: 0px; left: 0px; background: #ffffff; border-top: 1px; border-left: 1px; border-right: 0px; border-bottom: 1px; }
   
   #id_custom_#1234 /* on the right */
   { width: 300px; height: 500px; position: absolute; top: 0px; left: 300px; background: #ffffff; border-top: 1px; border-left: 0px; border-right: 1px; border-bottom: 1px;}

   
   
   
2. For underlining the header links, you can use
   

   Code

   #gaia_header #header_left li a, #gaia_header #header_right li a
   { text-decoration: underline !important;}

   
   
   
3. For placing your sections to the very top, you can use
   

   Code

   #columns
   { margin-top: -150px;}

Change all values as you see fit. =)RadioCarbon's got it.

[Electstatic]

OKAY.Thanks guys !

One question,are the sections in my profile centered all the way in the middle to you ?
Cause it's not for me.

[Melchiore]

They seem just a little shy of the center to me. It changes according to how big my window size is. This code may be able to center it better. I haven't tested it myself. Hope it helps. I can safely confirm that the code works perfectly. =D

Radiocarbon

Looks like you've already got your profile centered, but for Brink Kale's future reference ;]

#columns{width:###px; position:relative; margin:auto; float:none;}

[thekittenmonger]

.panel{opacity: .2; -moz-opacity: .2; filter:alpha(opacity=20) -khtml-opacity: .2; color: #FF7F50;}
.panel:hover{opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100) -khtml-opacity: 1; background: #556B2F; background: #808000; font-family: lilyupc; font-size: 24px; border: 5px groove #FF7F50; #FF7F50;}
html, body{ background: #FFFFFF url(http://dragon-tear.net/images/Complete%20Works%2002.jpg) no-repeat fixed;}
.panel h2{font-family: lilyupc; font-size: 36px;}
#gaia_header{border-bottom: 5px groove #FF7F50;}

this is one of my codes i've been experementing with...
i've compressed all the .panel into one line but the background code wont work and i cant figure out whats wrong any body know whats wrong?

[Melchiore]

In this code, there is a space in the url.

Code

html, body{ background: #FFFFFF url(http://dragon-tear.net/images/Complete Works 02.jpg) no-repeat fixed;}

To fix the issue, place singluar quoatation marks around the url.

Code

html, body
{ background: #FFFFFF url('http://dragon-tear.net/images/Complete Works 02.jpg') no-repeat fixed;}

You also have a few errors in your code.

Code

.panel:hover{opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100) -khtml-opacity: 1; background: #556B2F; background: #808000; font-family: lilyupc; font-size: 24px; border: 5px groove #FF7F50; #FF7F50;}

change it to this.

Code

.panel:hover
{ opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); -khtml-opacity: 1; background: #808000; font-family: lilyupc; font-size: 24px; border: 5px groove #FF7F50;}

[Electstatic]

▼ tσхíc sαчs
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

Yay ! It's centered perfectly. :'3

[Electstatic]

▼ tσхíc sαчs
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

How do you make your media hidden ?

[Electstatic]

▼ toxic says
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

Got problems with that.

[Melchiore]

This should do the trick.

Code

#id_media_12839
{ visibility: hidden; width: 0px; height: 0px;}

[Electstatic]

▼ Toxic Says
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

Thanks. :'3

[Melchiore]

Previous post updated. =D