Use the code below to Change your Profile picture to a different one.

Commonly asked as "How to make a Big Profile Picture"

You can use this code to place an animated .gif image as your profile picture also.

Use the CSS code below.

----------------------------------------

<*style type='text/css'>

#user-picture img {
display: none; width: ???px; height: ???px
}


#user-picture {
background-image: url(http://?????????????); width: ???px; background-repeat: no-repeat; height: ???px; text-align: center
}

<*/style>

----------------------------------------

You simply need to make slight changes to the code.

=====================================

(1) In the code above, find the line:
"background-image:url(http://?????????????);"

=====================================

(2) Replace the question marks "?" link with the URL link of your desired image.
[An animated image can be used!]

=====================================

(3) Right click on the image you wish to use, and click 'Properties' to view it's properties.

The image dimensions, "width and height" should be present in the properties.

=====================================

(4) Copy those px values of the width and height, and paste them respectively to the height and width sections of the code above, replacing the value '???px'.

=====================================

(5) Remove the * Astrix that I added to the

=====================================

(6) Paste the code in any editable section on your profile.
eg. 'About Me', Interests', 'Favorite Books', etc...

or

It can be pasted in the "Customize Profile" link below you profile picture (once your profile skin is removed).

http://www.hi5.com/friend/account/displayEditProfileCustomization.do

(The style tags should not be included here)

=====================================

And that's it.
It is very simple to do.
Even a Caveman can do it! ;)

It really isn't long to do.



Here is a full sample code with margins and borders included.

-------------------------------------

<*style type='text/css'>

#user-picture img {
display: none; width: 480px; height: 545px
}
#user-picture {
border-right: #ffffff 3px solid; background-position: center 50%; border-top: #ffffff 3px solid; display: block; background-image: url(http://photos1.hi5.com/0008/865/997/Zw8.04865997-02.jpg); margin-left: 25px; border-left: #ffffff 3px solid; width: 480px; border-bottom: #ffffff 3px solid; background-repeat: no-repeat; height: 545px; text-align: center
}
#user-details {
border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none
}

<*/style>

-------------------------------------

You can use this code, then adapt it to your profile by changing the values.


[Note]: Large Profile pictures can tend to mess up the other elements of your Profile Page if they are too large.



Have fun!
-Andrew

I wrote a detailed tutorial before on "How to make a BIG profile picture".

It's seems that most people are too lazy to read.

Please don't ask for an easier explanation.
That was the best I could do.


If you still sincerely need help.

Post the url link of the image you wish to use as your Profile Picture.

If do your custom code for you when I have the time.
Please be patient also for your reply.

-Andrew

I found this one to make the searchbar transparent , I hope you like it. =)

<*style type="text/css">{##-- Searchbar --##}#p_nav_header { background: url(http://i214.photobucket.com/albums/cc120/josuel777/header_logo2.gif)!important; background-repeat:no-repeat!important; border: ; width: 956px!important;margin-top:7px!important;height:55px} #new_header,#top_header , #primenu li.on,#p_nav_primary ,#nav_select { background:none !important; border: ; } <*/style>

Cool code!
Thanks for that. :)

Feel free to post any code Tutorials you may have in new (well named) topics, so that others can find it and use your codes easily.

I personally am using the Title format: Code ="?????"

Hopefully, once hi5 gets the groups search function fixed, if this group becomes highly populated in the future, people can locate a code tutorial more easily using the search bar.

I could indicate to include "Code =" if you are searching for a tutorial.

thanks friend because the truth I could not obtain it and to see if your you can help me with this: the URL of the image that I want to raise is: http://picasion.com/pic2/1ceb7fdd135278db64afb7d3cf1e6eca.gif and the html is:
Create avatar thanks

@ aེBrujitaེ,

Sorry I saw this reply so late.

Simply paste this code as is:

---------------------------------------

<*style type='text/css'>

#user-picture img {
display: none; width: 300px; height: 224px
}
#user-picture {
border-right: #ffffff 3px solid; background-position: center 50%; border-top: #ffffff 3px solid; display: block; background-image: url(http://picasion.com/pic2/1ceb7fdd135278db64afb7d3cf1e6eca.gif); margin-left: 25px; border-left: #ffffff 3px solid; width: 300px; border-bottom: #ffffff 3px solid; background-repeat: no-repeat; height: 224px; text-align: center
}
#user-details {
border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none
}

<*/style>

---------------------------------------

Then remove the * from the

That's it.

I can't view your profile either, so I can't see what's going on.

But it should work perfectly.

Good luck!
-Andrew

Code = Add space between one image and other of your profile or comments.
---------------------------------

<*embed src="" width="450" height="40" wmode="transparent" type="application/x-shockwave-flash"*>

1).Remove the * from the tags copy and paste it.
2).Play with the hight in order to make more or less space between the images.
3).Have fun.
----------------------------------


======================================================
======================================================

Code = Center the images from your profile or comments.

----------------------------------

<*center> HTML code here <*/center>

-----------------------------------
1).Remove the * from the tags.
2).Copy and paste it in your profile or comments.

Hey WhiteWolf 777

Thanks allot for those codes!

They are very useful!

Neat format too. Easy to understand.


It would be really cool if you could post them Both Each as separate new topics.

People may not find them that easily if they are hidden under a different topic name such as this one.

The search function I fear, may only Search by Title name also.

So the search may not pick up your code when it is fixed.

Thanks again for your contribution!

-Andrew

yes i do it yes yes yes!!!! tnx u a lotttttttttttttttttttttttt!!!!!!!!! <*style type='text/css'>

#user-picture img {
display: none; width: 300px; height: 224px
}
#user-picture {
border-right: #ffffff 3px solid; background-position: center 50%; border-top: #ffffff 3px solid; display: block; background-image: url(http://picasion.com/pic2/4d5a40651001fd95db3dfdfa12bcca52.gif); margin-left: 25px; border-left: #ffffff 3px solid; width: 300px; border-bottom: #ffffff 3px solid; background-repeat: no-repeat; height: 224px; text-align: center
}
#user-details {
border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none
}

<*/style>

Code = Add space between one image and other of your profile or comments.
---------------------------------

<*embed src="" width="450" height="40" wmode="transparent" type="application/x-shockwave-flash"*>

1).Remove the * from the tags copy and paste it.
2).Play with the hight in order to make more or less space between the images.
3).Have fun.
----------------------------------


======================================================
======================================================