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

[southrnbygrace.livejournal.com]

Does this code go under the CSS for the theme we're using? If so, at the top or the bottom or does it matter? :)

[sireesanwar.livejournal.com]

Yes, it goes into the coding you are using for your layout.

I would say look for default layout coding ".defaultuserpic" and replace it with the new stuff.

If you don't have the .defaultuserpic coding in your layout I would add it to the sidebar section as that is where it is in the journal and it is often best to keep things layered as they come up in coding.

Does that make sense?

[southrnbygrace.livejournal.com]

Does it matter where in the sidebar CSS that I put it? Does it need to go above the .sbarbody or below it and above something else? I have no idea. Sorry for being a pest.

[sireesanwar.livejournal.com]

No. I'd just put it in the sidebar section to keep things organize and easy to find.

[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.

[hadathought.livejournal.com]

I really hate to ask you this here, as this entry is a few months old and I don't want to bother you with questions like this. BUT I thought maybe you could help me. I am using the leaf shaped icons at my personal journal and I love them! But they look all wonky in Safari. I don't personally use Safari, but I do have it installed for layout purposes. Do you have any suggestions for fixing this? I posted to s2flexisquares, but so far no one has been able to give me a definitive answer.

(http://i60.tinypic.com/2qxssc6.png)

[hadathought.livejournal.com]

Oh... and I did try the overflow: hidden; code, but it hasn't changed. Then again, Safari tends to take a while to make changes, even after clearing the cache and resetting *shrug*

[sireesanwar.livejournal.com]

If you find out anything... let me know.

[sireesanwar.livejournal.com]

I'm stumped. I mean seriously. I've read up on this and tried everything to get it to work in Safari and it just won't. I'm as frustrated as you!

It could be that Safari doesn't support the coding that reshapes the image. I know friends in the past have had trouble with the user icon on Safari but she was always talking about my journal not her own journal's design.

See even this journal in Safari allows the entry to have the circle userpic but not the comments.