Beginner's Guide to Profile Coding [#2 - completed!!!]

Let's see how many votes we can get! :3

+1	100.0%	[ 1280 ]
Total Votes:			[ 1280 ]

[Brink Kale]

This is an example of what you are looking to do.

Code

#bar #addButton
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px; text-indent: -10000px;}

#bar #addButton a
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px;}

As you can see for the #addButton itself, I set the background property, the height property the width property and a text-indent property (to remove the text). No position property is used. If you want to use the position property (and especially if you are going to use "absolute" positioning), make sure you set the position property on all the buttons (not the "a", just the button) or they will overlay each other.

For the "a" (which is just the link specification) I set the background property, height property and width property to the same as I set it on the button itself.

If you should decide you want to alter the image on hover (your mouse moving over the button) then use the "a:hover" to do that.

Example

Code

#bar #addButton a:hover
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px;}

Follow the same format for all the buttons.

Example of the code with positioning set

Code

#bar #addButton
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px; text-indent: -10000px; position: relative; top: 100px; left: 100px;}

[The Spellslinger]

Brink Kale

This is an example of what you are looking to do.

Code

#bar #addButton
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px; text-indent: -10000px;}

#bar #addButton a
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px;}

As you can see for the #addButton itself, I set the background property, the height property the width property and a text-indent property (to remove the text). No position property is used. If you want to use the position property (and especially if you are going to use "absolute" positioning), make sure you set the position property on all the buttons (not the "a", just the button) or they will overlay each other.

For the "a" (which is just the link specification) I set the background property, height property and width property to the same as I set it on the button itself.

If you should decide you want to alter the image on hover (your mouse moving over the button) then use the "a:hover" to do that.

Example

Code

#bar #addButton a:hover
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px;}

Follow the same format for all the buttons.

Example of the code with positioning set

Code

#bar #addButton
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px; text-indent: -10000px; position: relative; top: 100px; left: 100px;}

gee is that all ? mrgreen
Thanks a ton though lol, I get it now

[The Spellslinger]

Kyra Valdire

Brink Kale

This is an example of what you are looking to do.

Code

#bar #addButton
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px; text-indent: -10000px;}

#bar #addButton a
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px;}

As you can see for the #addButton itself, I set the background property, the height property the width property and a text-indent property (to remove the text). No position property is used. If you want to use the position property (and especially if you are going to use "absolute" positioning), make sure you set the position property on all the buttons (not the "a", just the button) or they will overlay each other.

For the "a" (which is just the link specification) I set the background property, height property and width property to the same as I set it on the button itself.

If you should decide you want to alter the image on hover (your mouse moving over the button) then use the "a:hover" to do that.

Example

Code

#bar #addButton a:hover
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px;}

Follow the same format for all the buttons.

Example of the code with positioning set

Code

#bar #addButton
{ background: url('http://images.cooltext.com/1224329.gif') no-repeat; width:82px; height: 32px; text-indent: -10000px; position: relative; top: 100px; left: 100px;}

gee is that all ? mrgreen
Thanks a ton though lol, I get it now

stare not that it's that easy of course, now it's making 2 images for each one...

[Brink Kale]

No positioning properties on the "a".

[The Spellslinger]

Brink Kale

No positioning properties on the "a". =|

sweatdrop *feels like an idiot again* I knew that sweatdrop

[Brink Kale]

I'm just grumpy don't worry. It'll become natural instinct for you in time. =D

[The Spellslinger]

Brink Kale

I'm just grumpy don't worry. It'll become natural instinct for you in time. =D

*starts to say time is the one thing I don't have* *looks around* actually, I guess I have all the time in the world.... says a lot about me don't it neutral . lol but anyways I'll just take yeh're word for it lol, how long have you been coding for?

[The Spellslinger]

Hey how do I get rid of the purple bar thing next to the firey words? the #bar {background:transparent;} completely removed all the other codes so I had a classic prof w/ nothing on it besides a transparent bar

[Brink Kale]

That is the #tradeButton. If you don't want the #tradeButton to be preset, set it to a display property of "none". Otherwise, you can alter it as you would any other button on the #bar. =)

[miimic]

here comes post 1300!

brink: you look tough in your sig

[Brink Kale]

You look hot in your sig. xD I was trying too hard to look cool in mine. I ended up looking like a stick. =x

[The Spellslinger]

Brink Kale

That is the #tradeButton. If you don't want the #tradeButton to be preset, set it to a display property of "none". Otherwise, you can alter it as you would any other button on the #bar. =)

thanks

[The Spellslinger]

K i think this may be the last question, how do I move my avatar? without moving the entire #profile section? cause the buttons made it go down a lil and I want it back up

[miiimic]

There are two ways to fix this problem but I'll just give you the easy rute:

#profile .avatar{
position:relative;
top:00px;
left:00px;
}

Set the top and left values to whatever you want.

[The Spellslinger]

brightContinuum

There are two ways to fix this problem but I'll just give you the easy rute:

#profile .avatar{
position:relative;
top:00px;
left:00px;
}

Set the top and left values to whatever you want.

surprised thx