VISUAL ✿ Old School Beginner Guide

Did the "visual aid" help you?

Yes.	85.9%	[ 1708 ]
No.	14.1%	[ 281 ]
Total Votes:			[ 1989 ]

[20 Shades of Crazy]

Ah, thank you for that link!

[20 Shades of Crazy]

Alright, another question.
In my friend's section, I only want want to have the names listed. So, to get rid of the image, I have that code. But when I just get rid of the images, the names appear exactly as they were. There's also a gray line going down. If you want to see what I mean, just go to my profile. Help? sweatdrop

[Brink Kale]

Have you tried setting your "friends panel" to minimal via the Profile Preferences page? One second as I check something.

As for the border, set the border of the "#friends #friendGroup li" to a value of none as well as setting the width and height as you please to "alter" the spacing as you please.

You could also set the width and height of the #friends selector to as you please as well as setting the display of the #friendGroup li to a display property of inline. ( if you want a vertical list )

In all, your code would look something like this.

Code

#friends
{ width: 100px; height: 300px;}

#friends #friendGroup img
{ display: none;}

#friends #friendGroup li
{ border: none; height: auto;}

#friends #friendGroup li p
{ display: inline;}

[20 Shades of Crazy]

I got it, thanks to your great links. whee

But now I'm having major problems with the comments. gonk Gosh, I feel like a noob.
Here's what I have:
#comments {background: transparent;position: absolute;left: 130px;top: 350px;overflow: auto;width: 230px;height: 100px;border: none; color: #C77C23; font-family: times new roman; font-size: 14px;}
#comments h2 {display:none;}
#comments #alerts_banner {display:none;}
#comments p {display:none;}
#comments .caption{display:none;}
#comments .caption .date{text-size: 9px;}
#comments .caption a{text-size: 9px;}
#comments .caption .message{text-size:11px;}
#comments .avatar {display:none;}
#comments .message .caption:before, .caption:after, .caption2:before, .caption2:after{background-image:none;}
#comments .caption2{display:none;}
#comments .caption2 .date{display:none;}
#comments .caption2 a{text-size:9px;}
#comments .caption2 .message{text-size:11px;}
#comments .caption2 .avatar{display:none;}

What I want is something like
Username
This is a comment.
______________________
Username2
This is a second comment.


The only line the one separating the two. I can't get rid of the second row of avatars, and I don't know why the comments aren't actually there. <w<;;

[Brink Kale]

You are looking to set the "#comments .avatar, #comments .avatar2" selectors to a display of "none". Then set the "#comments .caption, #comments .caption2" selectors to a border of "none" then set the border-bottom to whatever you please ( and set !important to it ). Then set the "#comments .message" background to "none".

Looks something like this

Code

#comments .avatar, #comments .avatar2, #comments .caption:before, #comments .caption:after, #comments .caption2:before, #comments .caption2:after
{ display: none;}

#comments .caption, #comments .caption2
{ border: none; border-bottom: 2px solid #000000 !important;}

#comments .message
{ background: none;}

[20 Shades of Crazy]

Thank you so much for your patient help. heart

[Eow]

^ Your avatar is so cute. ^^ And your profile design reminds me a lot of mine. Good luck.
^^ Helped me make my profile as well. x3 <3

I'm working on an entry for the contest. I love this thread. heart

[Phemonoe]

Hello.
So, here's the deal.
I created a profile for a friend of mine.
But, when I had another friend come and check it out, she says that everything is wayyyy out of proportion. And that the image repeats. And nothing is in alignment.
I figured it could be that we have different sized monitors, because her's is a lot larger than mine. But, I wanted a second opinion. Is it just her monitor, or is it my coding? Because it looks perfect on my computer. And I used FF.

[Synchronised Mosher]

Mitanni

Hello.
So, here's the deal.
I created a profile for a friend of mine.
But, when I had another friend come and check it out, she says that everything is wayyyy out of proportion. And that the image repeats. And nothing is in alignment.
I figured it could be that we have different sized monitors, because her's is a lot larger than mine. But, I wanted a second opinion. Is it just her monitor, or is it my coding? Because it looks perfect on my computer. And I used FF.

It could be that. Especially concerning the background (if it's not a seamless tiled one).
It could be that they're using Internet Explorer: if you used absolute positioning, then IE will interpret them different (wrong) to Firefox.
Or it might be that you positioned elements using percentages? Because then different screen resolutions will defiantly cause it to look different.

[Phemonoe]

Synchronised Mosher

Mitanni

Hello.
So, here's the deal.
I created a profile for a friend of mine.
But, when I had another friend come and check it out, she says that everything is wayyyy out of proportion. And that the image repeats. And nothing is in alignment.
I figured it could be that we have different sized monitors, because her's is a lot larger than mine. But, I wanted a second opinion. Is it just her monitor, or is it my coding? Because it looks perfect on my computer. And I used FF.

It could be that. Especially concerning the background (if it's not a seamless tiled one).
It could be that they're using Internet Explorer: if you used absolute positioning, then IE will interpret them different (wrong) to Firefox.
Or it might be that you positioned elements using percentages? Because then different screen resolutions will defiantly cause it to look different.

Well, I know that I didn't use percentages, simply because I find it harder to work with. And she also uses Firefox. So I do think it's the monitor sizing. Thanks for the feedback.

[Synchronised Mosher]

It's definitely the screen resolution then.
You can change your own screen resolution to see how it looks.
Desktop > Right Click > Properties > Settings.
Change it there.

[lil_neko]

Wow.
Gaia is like a foreign place to me. xOx
I can't believe this thread still exists.

[20 Shades of Crazy]

Where can I find info on changing your buttons, to make them appear with your own images?

Also: how can I hide the scrollbar on the details section of my profile? I got everything but that section...

[Betty Undead]

AWESOME guide!
It helped me clean up my profile coding!
Muchhhh muchhh nicer and easier to read now! heart 4laugh

[Synchronised Mosher]

20 Shades of Crazy

Where can I find info on changing your buttons, to make them appear with your own images?

Also: how can I hide the scrollbar on the details section of my profile? I got everything but that section...

Do you mean the contact bar? Add, PM, Trade, Ignore? Here they are:

Online/offline images
#bar #onlineButton {background-image:url('YOURIMAGE'); height:XXpx; width:XXpx; position:absolute; left:XXpx; top:XXpx;}
#bar #offlineButton {background-image:url('YOURIMAGE'); height:XXpx; width:XXpx; position:absolute; left:XXpx; top:XXpx;}
#bar #hiddenButton {background-image:url('YOURIMAGE'); height:XXpx; width:XXpx; position:absolute; left:XXpx; top:XXpx;}

Normal images for contact bar links
#bar #addButton a {background-image:url('YOURIMAGE'); height:XXpx; width:XXpx; position:absolute; left:XXpx; top:XXpx;}
#bar #msgButton a {background-image:url('YOURIMAGE'); height:XXpx; width:XXpx; position:absolute; left:XXpx; top:XXpx;}
#bar #tradeButton a {background-image:url('YOURIMAGE'); height:XXpx; width:XXpx; position:absolute; left:XXpx; top:XXpx;}
#bar #ignoreButton a {background-image:url('YOURIMAGE'); height:XXpx; width:XXpx; position:absolute; left:XXpx; top:XXpx;}

Optional "rollover" images for contact links (when the mouse goes over the link, the image changes. make sure the image is the same size as the original)
#bar #addButton a:hover {background:url('');}
#bar #tradeButton a:hover {background:url('');}
#bar #msgButton a:hover {background:url('');}
#bar #ignoreButton a:hover {background:url('');}

Also, i usually omit the ignore link with display:none; but that's just preference.

YOURIMAGE=replace with the URL of your image
HEIGHT/WIDTH=height and width of the image you picked.
LEFT/TOP=positioning of the links.

good luck. ;]