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 : )

---