Two Default User Pic Looks

[sireesanwar.livejournal.com]

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.

Comments

[sexycazzy.livejournal.com]

I just wanted to say thank you for this! The 'leaf" icon goes well with the current layout I am using on my journal and finally the default userpic on my graphics community is now centered!

I am so glad that I found your community as it has been a great resource in helping me to get a bit more familiar with the CSS / html codes so thank you! :-D

[sireesanwar.livejournal.com]

You are welcome.

Yes, I'm trying to remember to always center the default icon. I don't use it much so I often forget to code it in new layouts.

You are welcome! I'm so glad this comm is doing exactly what I hoped it would.