Two Default User Pic Looks

Jan 03, 2014 12:07

Account Status: All
Actions: Customize your Default Userpic
Theme: Flexible Squares (maybe more)



Happy New Year! Here is a Userpic Customization.
The Goal:
Centering your Default Userpic or Making it rounded




Centering:
.defaultuserpic, .defaultuserpic image { text-align: center; padding: 10px; margin: 0 0 8px 0; }

Rounded:
.defaultuserpic {
width: 100px;
height: 100px;
margin: 0px auto 10px auto;
padding: 7px;
background-color: #444444 !important;
border: 1px solid #777777;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
-ms-border-radius: 70px;
-o-border-radius: 70px;
border-radius: 70px;
}

.defaultuserpic img {
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}

You can also change the border-radius coding on both the ".defaultuserpic" & ".defaultuserpic img" to something like:
-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;

Which will make it look like this:


If you reverse the numbers to 60px 5px 60px 5px you will have this "leaf" look going the opposite direction.

Questions? Please Comment.

account: paid-permanent, help with: userpics, #account: all, .flexible-squares

Previous post Next post
Up