Join in the Colorful Conversations

Looking for answers to your color questions, have some advice to give... or simply want to get to know your fellow COLOURlovers? You're in the right place.

Forums»Color Talk»Showcase Your Work»CL Profile Pic Replacer (Keep your Avatar!)

CL Profile Pic Replacer (Keep your Avatar!)

Create New Topic
Showing 1 - 20 of 22 Comments
Once upon a time here on CL, you could set different images for your userpic (the picture at the top of your profile) and your avatar (the little square icon that follows you around CL).

This was changed sometime around September of 2011; now your avatar is a cropped and slightly squished version of your profile pic.

Here's why, according to Aaron Epstein:
The reason we combined the avatar and profile picture into a single image is that not everyone on CL uploads BOTH a profile picture and an avatar image. Or, you see someone's small avatar image and you want to see it at a bigger size, so you click through to their profile, but it turns out they use a totally different image for their big profile picture.
...
We think this change will make it easier for members (and new members especially) to only have to upload a single image to represent themselves on the site, we'll see much less of that ugly default avatar that shows up when members haven't uploaded one or the other themselves, and it will make for a better experience for everyone.

Personally, I really didn't like the change, since my weird little avatar is as much a part of my identity here as my name. I felt like I was stuck with my profile pic, which I used to change a couple of of times every month. (Two years of boredom, ho-hum.)

It wasn't until last week that I was adding scrollcode (Thanks, Desvil!) to my profile page and had an (admittedly minor) epiphany. The advent of div code means that you can 'float' content like images and links over the rest of your page...!

With some trial and error, I figured out a way to do what I wanted. I was briefly stymied when CL added the new ad banners since I couldn't get it to calculate properly for differing positional heights. But I've got it working again now, and I'd like to share it with you. :)

Here's how to set a different image for your profile:


1. Create/crop the image of your choice.
The dimensions must be 232 pixels wide by 161 pixels high.

2. Upload that image to your hosting service.
( I like PhotoBucket )

3. Add this code to the very top of your profile.
It has to go there, or the page will not render properly.

4. Swap out the text "yourhosturl.com/yourpic.jpg" for the location of your uploaded image.

5. Enjoy!
...And swap as often as you like. :)
(...You could even use an animated .gif, as long as you have the knowhow to make one that is 232x161.)

Love,
Prax

NOTE: The vertical positioning of the code may need to be adjusted depending on the spacing of your page (such as whether there are two or three lines in your 'bio', or if you have more than 2 rows of thumbnails next to your profile pic). If the placement isn't working for you and you don't know how to fix it yourself, please let me know in this thread, and I'll do whatever I can to help. :)

Genius! I might try this sometime, thanks for sharing Prax!
OMG! This is great. I've been trying to give each of my cats some facetime on my profile pic. Now I can just create an animated gif that flips through their pictures every 10 seconds or so. Your'e a genius!
Eeeeeh! Thank you so much! I'm going to try this right now. :D

Edit: It is working! Thank you so much, Praxi!
mangowasabi wrote:
Genius! I might try this sometime, thanks for sharing Prax!


Haha, that's awesome. :) Thanks so much for letting me know you like the idea!

FlutePixzy wrote:
OMG! This is great. I've been trying to give each of my cats some facetime on my profile pic. Now I can just create an animated gif that flips through their pictures every 10 seconds or so. Your'e a genius!


Hi Pixzy. :) So glad you like it. I have tested it now with a .gif, and it works great. :) I'd love to see all your kitties; we have three of the little furballs, and I love them to bits.
Hi Mei! Glad you like it, and thanks for trying it out. :)

For your page It looks like you need a different offset: in your code, if you replace the value -448 with -411 it should sit in the proper place.

Enjoy your second honeymoon. :) (In Japan no less, you lucky goose!)
OrigamiMei wrote:
Eeeeeh! Thank you so much! I'm going to try this right now. :D

Edit: It is working! Thank you so much, Praxi!
Team
Clever! :)
This is so cool! I'll try it some time later. Thank you, Praxi dear! <3
Woo Hoo!! Love ya, Praxi!!
So cool! Thanks, Mei!
This is pretty awesome! Thanks Mei! ♥
Thanks! I have been wanting to do gifs for a long time now in my profile. How so I add that heart to my picture, like you have cutted yours. also the margin was different for me.
Thanks guys! So glad you like it; hope it's useful. :)

MiyuriScarlet wrote:
This is so cool! I'll try it some time later. Thank you, Praxi dear! <3
Trixxie wrote:
Woo Hoo!! Love ya, Praxi!!
Worf Thaddeus wrote:
So cool! Thanks, Mei!
WinterLover wrote:
This is pretty awesome! Thanks Mei! ♥

Haha! I was almost afraid I'd get a cease and desist. Thanks muchly, Bubs. :)

COLOURlover wrote:
Clever! :)
timanttimaarit wrote:
Thanks! I have been wanting to do gifs for a long time now in my profile. How so I add that heart to my picture, like you have cutted yours. also the margin was different for me.


Looks like you have the positioning adjusted now. :) (As stated in the first post, positional height will vary because of differences on our profiles: you have a 'shapes' category that I do not, which adds an extra row of thumbnails.)

There's two ways of making the corner:

I made the cut-out corner by masking the gif in photoshop; all the animation layers are stacked on a 'dogeared' shape I made by taking a screenshot of my profile page.

The other thing you can do is to take a screenshot, copy the heartcorner and put it on the top of your gif. :) If you do it that way, make sure to throw in a dropshadow so it fits the existing style.
thank you so much, Mei. you're just a genius! :) ♥ ♥ ♥
WOAH!!! OMG! This is awesome!
Amazing! I'll try it out. (:
UUh...done:)..thanks Prax:)..some movement for a change:)
OMG! I am in awe. Today you showed Van Gogh's "Starry Night" I love it!!!
I am going to do a fiber art piece of that painting. It's so haunting and beautiful.
It's really cool on your profile. Thank you!!!
:)
You must be logged in to post a comment.

Recent Discussion Comments

waleedmazhar2
waleedmazhar2
Hi Guys,

Sorry for the problem you are facing. Could you let me know URL you are using for API. Also please share with me API key in lovenote. Please don't share your API key here.

I have also refresh all keys. Should be working now.

Thanks for your kind cooperation.
palalula
Piahr
Piahr
Piahr

Latest Articles

//View More ›

Latest Colors

//View More ›

Latest Palettes

//View More ›

Latest Patterns

//View More ›