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

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

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

[Brink Kale]

There isn't much to it really. The controllers are "#bar", "#addButton", "#msgButton", "#tradeButton", "#ignoreButton" respectively. The #bar is the wrapper for the other buttons, it holds them and acts as a background etc for them. You can change the dimensions ( width property, height property ), overflow property, background property and the position property ( coupled with top property and left property ). Margins and paddings can also me altered. ( You can actually do anything you want to any property via C.S.S, its all according to what the end result you are trying to get. ) The same applied for the actual "Buttons". Please keep in mind that the selectors are case sensitive meaning that "#Addbutton", "#addButton" and "#addbutton" are not the same thing. =) To change the actual button icons simply specify a background property on the selector you want. As for the "on hover" the ":hover" class is a universal hover property that C.S.S uses to tell the browser to only initiate the code on hover of the section it is used on.

An example of the hover use would be

Code

selector
{ background: red;}

selector:hover
{ background: green;}

[tara_leeg]

Im still not getting it, here is the first button Im trying to replace, but Im obviously getting the code wrong. Here is the code Im using.

#bar #ignoreButton {background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Ignore.png')

Please help with making changes I need to make this work.Then I have the understanding for the other buttons.

[Brink Kale]

You aren't closing the code off property. The semi colon as well as the closing brace needs to be appended. =) Use the width and height properties to change the "viewing" size.

[tara_leeg]

Okay, I got my buttons up, but its still not right. Take a look, hover your mouse over my buttons, you'll see whats wrong. http://www.gaiaonline.com/profiles/748117
I'll send the code once you've seen it.

[tara_leeg]

/*Contact Bar*/

#bar {
position:absolute;top:3px;left:-15px;
height : 45px ;
width : 320px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Barcopy.jpg')}

/*Online*/
#bar #onlineButton{
height : 45px ;
width : 125px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Online.png')}

/*Offline*/
#bar #offlineButton{
height : 45px ;
width : 125px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Offline.png')}

/*Add*/
#bar #addButton{
height : 45px ;
width : 39px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Add.png')}

/*Message*/
#bar #msgButton{
height : 45px ;
width : 55px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/MsgMe.png')}

/*Trade*/
#bar #tradeButton {
height : 45px ;
width : 46px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Trade.png')}

/*Ignore*/
#bar #ignoreButton {
height : 45px ;
width : 55px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Ignore.png')}

[Swell Sundae]

Try adding this in then. 3nodding

#bar a{text-indent:-1000px;}
#bar #addButton a{height:20px;width:39px;}
#bar #msgButton a{height:20px;width:55px;}
#bar #tradeButton a{height:20px;width:46px;}
#bar #ignoreButton a{height:20px;width:55px;}
#bar #addButton a:hover, #bar #msgButton a:hover, #bar #tradeButton a:hover, #bar #ignoreButton a:hover{background:transparent;}

And the contact bar in general (not the specified links and their sizes upon activation) should have semicolons, in the color orange below-

Quote:

/*Contact Bar*/

#bar {
position:absolute;top:3px;left:-15px;
height : 45px ;
width : 320px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Barcopy.jpg');}

/*Online*/
#bar #onlineButton{
height : 45px ;
width : 125px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Online.png');}

/*Offline*/
#bar #offlineButton{
height : 45px ;
width : 125px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Offline.png');}

/*Add*/
#bar #addButton{
height : 45px ;
width : 39px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Add.png');}

/*Message*/
#bar #msgButton{
height : 45px ;
width : 55px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/MsgMe.png');}

/*Trade*/
#bar #tradeButton {
height : 45px ;
width : 46px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Trade.png');}

/*Ignore*/
#bar #ignoreButton {
height : 45px ;
width : 55px ;
background-image:url('http://img.photobucket.com/albums/v337/tara_leeg/Ignore.png');}

[tara_leeg]

Thank really helped, thanks! But I still have a long ways to go...Any help with my coding is much appreciated.

[tara_leeg]

Im trying to slide my about box over now. Everything I try just makes it float over the friends list. Help...

[Swell Sundae]

tara_leeg

Im trying to slide my about box over now. Everything I try just makes it float over the friends list. Help...

When moving any of the main sections, that'll happen since it's what you're coding at the time. (One layer/section of the profile overlapping another.) You can temporarily delete it from view with {display:none;} until you want to put it back into view later. 3nodding

[tara_leeg]

Swell Sundae

tara_leeg

Im trying to slide my about box over now. Everything I try just makes it float over the friends list. Help...

When moving any of the main sections, that'll happen since it's what you're coding at the time. (One layer/section of the profile overlapping another.) You can temporarily delete it from view with {display:none;} until you want to put it back into view later. 3nodding

I think Im gonna do more of this tomorrow. I haven't done bad, considering I knew nothing about CSS. I know where I can find help.

[DemiGod Complex]

how do i put up a dream avi?

[Brink Kale]

If you are using tektek.org, it should give you a "Code" after you "save" the avatar. Copy the "Code" and paste it into any section ( of your profile or anywhere on Gaia ) that allows the use of BBCode. This includes but is not limited to your "Signature", your "About Me" or even a Post.

[Ouji Maru]

<== This thread helped me so much, very much a convenience. ==>

[EternalLadyMist]

is there a way I can hide the avatars and boxes around the comments in the comment section? Like I wanna keep the comments but hide the avatars and the borders around each comments. And possibly center or hide the Viewing of so and so comments.In a classic profile. =l....If thats not possible is there any way to hide the comments but keep the view/add comment links in a classic profile? I hope i'm not confuseing anybody. I just change my profile alot and like to try new codes and such...

[miimic]

EternalLadyMist

is there a way I can hide the avatars and boxes around the comments in the comment section? Like I wanna keep the comments but hide the avatars and the borders around each comments. And possibly center or hide the Viewing of so and so comments.In a classic profile. =l....If thats not possible is there any way to hide the comments but keep the view/add comment links in a classic profile? I hope i'm not confuseing anybody. I just change my profile alot and like to try new codes and such...

it's all in the guide crying