Tuesday, March 23, 2010

How-to: Customize profile picture border

I'm sure most of you have figured this out by now, but just thought I'd share how you can change the way your profile image looks! It's really easy, and all it takes is a little work : ) The bolded sections in the code are the parts you can add, remove, and/or edit.

If your profile picture looks like this, and you dont like it...



Go to Layout, Edit html.
Scroll until you find this section of code:

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}

NOW FOR STYLING!
  • Remove "padding: 4px;" if you DO NOT want a space between your profile picture and the border around the picture.
  • You can adjust the border width, style, and color.
  • You can change "margin-$endSide: 5px;" to adjust the amount of space between your profile picture and profile text.
  • You can also add attributes to adjust the size of your picture.

You can make it look like this........... or this



Using this modification of code:


/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 10px;
margin-bottom: 0px;
margin-$startSide: 0;
border: 1px solid #D18E9E;
width:60px!important;
heigh:100px!important;

}

Or you can leave "padding: 4px;" & increase the value,
then add a background... It can look like this:




Using this modification of code:

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 10px;
margin-bottom: 0px;
margin-$startSide: 0;
border: 1px solid #D18E9E;
width:60px!important;
heigh:100px!important;

padding: 10px;
background-image:url("http://i40.tinypic.com/dy3ew4.jpg");
}

Or if you want a "polaroid picture" kind of look...
(of course it works better if your profile picture is SQUARE :P)



You can use this modification of code, tweak it to your needs.

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
padding-bottom:25px;
background-color:#ffffff;
border: 1px solid #000000;
height:80px;
width:80px;
}

Hope this helps! Have fun editing : )



20 comments :

  1. thank you so much hun.. This is really helpful..

    ReplyDelete
  2. Thank you so much for the tutorial :)

    ReplyDelete
  3. Thanks for the codes! I never thought of modifying my profile picture, but I guess now I'll have something to play with when I'm bored :]

    ReplyDelete
  4. man you are so pro! i know you say its simple.. but still.. haha! p.s - your new profile pic is beaaaaaaayooootiful! even matches your bg color! hehe!

    ReplyDelete
  5. Great idea! Thank You for this.. I just noticed my profile isnt on my blog :P

    ReplyDelete
  6. so thaaaaaaat's how u do the polaroid look! LOL. thanks girl! =)

    ReplyDelete
  7. Interesting! Thanks for sharing!

    ReplyDelete
  8. Thanks Erynn! I've been a bit irritated at the little space for a long time. xD & now I've gotten ride of it, yay!

    I giggled when I read PinkY Nation, kekeke. xD Maybe I should add my own Y~

    ReplyDelete
  9. ooh i'm just irritated with my blog period! i want it to be cutesie like yours!! FIX IT PLEASE?! lol jk!

    thanks for the tips! if i ever get a chance - i'll try this out!

    btw i tagged you hun!: http://randomnesswithkhris.blogspot.com/2010/03/couple-of-tags.html

    ReplyDelete
  10. Erynn! This is helpful :) I'll play around with my pic when I have time, thanks! I'm actually in the midst of modifying my layout and trying to work with XML x( haha but I love 3 column blogs and I'm determined to get it! Btw your new haircut is adorably chic, and I love your nails from your previous post.

    ReplyDelete
  11. thanks for the tutorial :D ive been long gone from the html world and needa get back on that boat! hence why my page is so blah and plain :*( lol

    ReplyDelete
  12. Thanks for sharing this! but I'm always too scarred to start messing w/ the blog! LOL! I'm so afraid I'm gonna do something and make it look worse! LOL!

    ReplyDelete
  13. If I could, I would mail you some Sonic tater tots. <3 Rina

    ReplyDelete
  14. I have figured this out but not with a background image. How cool! Thanks for sharing =)

    ReplyDelete
  15. You are so awesome for posting this!!!! <3 it!

    ReplyDelete
  16. Erynn, I love your new hair! :) Ok, I had no idea you could adjust this...LOL. Thanks!

    ReplyDelete
  17. Whoa look at you Code Queen!!

    I'm mega impressed! I had no idea you could even CHANGE the picture on your profile LOL!

    Anyways sweetie, I wanted to tell you thank you for your super loving comment. It was the first one I read after just typing up that depressing post and you cannot possibly believe how much better it made me feel! You almost made me cry hun! Thank you for taking the time to share your experiences with me, it really helps me put it in perspective knowing others have gone through the same thing as me.

    i love you <3

    ReplyDelete
  18. Thanks for the helpful tutorial! Blog layouts/changes boggle my mind! :(

    ReplyDelete
  19. thanks for the tutorial girly! and I LOVE YOUR HAIR BAAAH ITS GORGEOUS ON YOU! and sorry I've been neglecting my blog :(

    reply to your comment, i'm so sad break is over... but it's alright, schools technically half over so yay! and I hope you have a wonderful break ;) filled with food and the people you love!

    and happy is soooooo cute its okay if she doesn't stay still, does your camera have image stabilization? hahaha it works on my pup when he's all hyper :)

    ReplyDelete
  20. Thanks for this, Erynn! haha I always love your html help posts because I'm still such a noob with blogger code. I change things here and there, but I don't really understand everything...just a BUNCH of trial and error. UGH. that's why it takes me DAYS and ages to finally figure something out. What I hate most is figuring out how to customize certain texts in my post. For example, I want to customize the look of my BOLDed text and Italicized text to be different from the rest of my post body text. I'm having trouble with it...so confusing and frustrating that I can't get it! :( Maybe, if you have time, you can do a quick post about how to customize various blog texts? I would really appreciate it, and it would help a noob like me out a lot! haha :P thank you!

    ♥ caroline

    ReplyDelete

If you have any questions, comments, or feedback, feel free to drop me a line and I'll get back to you asap :)