?

Log in

No account? Create an account
 
 
03 June 2015 @ 01:40 pm
Making A Layout: Userpics  
Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Customizing Userpics
Links: Code Index

I think we should talk about the userpics completely separate from the entries post just because there are several ways to customize a userpic and I'd like to show you a couple.
 photo usericons005.png  photo usericons003.png  photo usericons004.png  photo usericons002.png
The coding I would like to work with is from my layout Oxygen.


In the Entry Section is where you will find the userpic coding for your posts and your friends page.


.userpic: This is going to be for the userpics holder on your journal.
.userpicfriends is going to be the userpics holder on your friends page. Often we want these to be the same so we can code them together by starting out the coding like this: .userpic, .userpicfriends {

  1. float: Here this is important. I have it set as right because I want it on the right side of the posts.

  2. margin: The margin here has a -60px on the right which means the userpic is going to be pushed out from the right side of the layout by 60px which is why we have the negative in front of it. You'll want some margin around the other sides to prevent text from your post from running into your userpic.

  3. padding: Here the padding is giving the extra space inside the area like usually which is how we are getting the color around the edges of the userpics above.

  4. width & height: Use these to keep the dimensions of the userpic holder. You can even make the userpic holder smaller by changed the width & height.

  5. text-align: This is going to align the username under your userpics on communities and your friends page.

  6. background or background-color: This is one place you will need the !important added onto the color. I have it set to #FFFFFF (which is white). You'll notice it is actually coming up #FFF (sometimes this will work when the numeric coding for the color is all the same).

  7. box-shadow: This just gives it a little bit of a coming off the page look.

.userpic img, .userpicfriends img: This is what is going to adjust your actual picture. So if you change the width & height here then the picture will shrink.

.userpicfriends a, .userpicfriends font: This is actually going to adjust the font link for your usernames under the userpic. So if you want it to be uppercase, italics, have a shadow around the text; you'd do that all here.

.userpicfriends a:hover, .userpicfriends a font:hover: And, of course, we follow that up with a hover option.

This coding is going to get you a userpic that looks something like this only with a white border. This image actually shows a background image as the background which you can do by adding the coding for images to the .userpic, .userpicfriends { coding.

 photo usericons004.pngWhat if you want something more like the image to the left?

First, this image has a right margin of over -100px to put it completely outside oft he content. And the .userpic, .userpicfriends { coding has a background-color with the rgba coding: background-color: rgba(255, 255, 255, 0.6);

But you can tell the bottom of this background holder is bigger than the other sides. That is because the padding likely looks something like this: padding: 10px 10px 15px 10px;

And then there are these...
 photo usericons005.png  photo usericons003.png photo usericons002.png
You'll start off by adding a border radius to the .userpic, .userpicefriends { coding.
.userpic, .userpicfriends {
 float: right;
margin: 5px -60px 25px 15px;
 padding: 10px;
 width: 100px;
 height: 100px;
 text-align: center;
 color: #FFF!important; photo usericons002.png
 background: #FFF!important;
 -webkit-box-shadow: #CCC 0 0 5px;
 -moz-box-shadow: #CCC 0 0 5px;
 -ms-box-shadow: #CCC 0 0 5px;
 -o-box-shadow: #CCC 0 0 5px;
 box-shadow: #CCC 0 0 5px;
-webkit-border-radius: 60px;
 -moz-border-radius: 60px;
 -ms-border-radius: 60px;
 -o-border-radius: 60px;
 border-radius: 60px;

 }
Because it is 60px radius on every side (ie60px = 60px 60px 60px 60px = top left, top right, bottom right, bottom left) we are going to get a circle but if you stop here you will notice the image hasn't been made into a circle only the holder.

This is why you'll need to add the border-radius to the .userpic img, .userpicfriends { img as well.
.userpic img, .userpicfriends img {
 width: 100px;
 height: 100px;

-webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 -ms-border-radius: 50px;
 -o-border-radius: 50px;
 border-radius: 50px;

}
Notice how the actual image is only being rounded at 50px. This is so we are leaving that border of white. If you want to get ride of it just change the padding in the .userpic, .userpicefriends { coding.

How would we make that leaf? This time the border radius lines are going to look like this for the .userpic, .userpicefriends { coding. photo usericons003.png
-webkit-border-radius: 5px 60px 5px 60px;
 -moz-border-radius: 5px 60px 5px 60px;
 -ms-border-radius: 5px 60px 5px 60px;
 -o-border-radius: 5px 60px 5px 60px;
 border-radius: 5px 60px 5px 60px;


And for the .userpic img, .userpicfriends { coding it will look like this:
-webkit-border-radius: 5px 50px 5px 50px;
 -moz-border-radius: 5px 50px 5px 50px;
 -ms-border-radius: 5px 50px 5px 50px;
 -o-border-radius: 5px 50px 5px 50px !important;
 border-radius: 5px 50px 5px 50px;



We can also make a tear drop or thought bubble as it were... photo usericons005.png This time the border radius lines are going to look like this for the .userpic, .userpicefriends { coding.
-webkit-border-radius: 60px 60px 5px 60px;
-moz-border-radius: 60px 60px 5px 60px;
-ms-border-radius: 60px 60px 5px 60px;
-o-border-radius: 60px 60px 5px 60px;
border-radius: 60px 60px 5px 60px;


And for the .userpic img, .userpicfriends { coding it will look like this:
-webkit-border-radius: 50px 50px 5px 50px;
-moz-border-radius: 50px 50px 5px 50px;
-ms-border-radius: 50px 50px 5px 50px;
-o-border-radius: 50px 50px 5px 50px !important;
border-radius: 50px 50px 5px 50px;


You can move which corner has the 5px to make the point of the thought bubble move around.

You can also make only one of the corners 60px/50px or you can make just one side of the userpic 60/50 and experiment with different shapes.

For this layout we are going with the first option.

What we've come up with:


Any questions about this tutorial? Please Comment

 
 
 
shiegrashiegra on June 3rd, 2015 10:16 pm (UTC)

This post is amazing, thank you for sharing!
Jill aka Jo: Eureka: Jo and Zanesireesanwar on June 4th, 2015 12:29 am (UTC)
Re:
You are very welcome!
mizz_destinymizz_destiny on July 12th, 2015 07:33 pm (UTC)
LOVE this post
Jill aka Josireesanwar on July 14th, 2015 09:09 pm (UTC)
I'm so glad!
betgirlbetgirl on April 13th, 2016 02:56 am (UTC)
Thank you for all your layout tutorials!

I've been customizing a layout I had saved a long time ago and they have all been very helpful. They're easy to follow and to understand. I had some difficulty figuring some things out, but I guess it's just because the code I'm working with is a bit old, so the names of some things are different.

Anyway, these were all well written and really helpful. Thank you for taking the time to do this!
Jill aka Josireesanwar on April 18th, 2016 11:47 pm (UTC)
Thanks for the lovely comment.