Avatar Rounded Corners

[Colin]

Link to Mod

Avatar Rounded Corners by Colin
Author: Colin
Summary
This modification adds soft edges or rounded corners to all avatars.

[Antechinus]

That's too verbose on the declarations. All browsers support border-radius without prefixes.

Also, it wont be totally reliable with just that selector. A more bulletproof way of selecting it is .avatar>a>img

That will work regardless of avatar sizing and li sizing. I suggest doing it like this:

Code Select Expand


.avatar>a>img
{
border-radius: 6px;
}


[Colin]

Hi Antechinus,

Thanks for taking the time to comment. If my memory serves the older mozilla browsers require -moz, but you are the CSS expert .

Good point about the .avatar>a>img I will add that.

[Antechinus]

IIRC Firefox has supported it without a prefix siince FF4, which is a long time back. The 3.x series is no longer beng patched, so nobody should be using it anyway. Basically, any browser worth considering these days will be fine without the prefix.

You can always check things on this site if in doubt: http://caniuse.com/#feat=border-radius

[Mick.]

Not for everyone but if you wanna be cool, circle the avatars too.

If you have your avatars set to 100px by 100px, use half the px in the radius.

Remember to use half the px depending on the width and height of the avatar.

Code Select Expand


.avatar
{
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;

}


See attachment,

[xrunner]

Testing now at my forum - looks pretty cool. 

[Mick.]

Heck you can even put a nice shadow too!

Code Select Expand


box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);


[Antechinus]

That one can screw up though. Take avatars like my current one. It already has a reflection. If you put a border and box-shadow on it, it'll look like crap.

And again, don't use vendor prefixes for CSS3 properties that don't need prefixes. It triples the amount of css for absolutely no benefit. Keep your code lean.

[Mick.]

That one can screw up though. Take avatars like my current one. It already has a reflection. If you put a border and box-shadow on it, it'll look like crap.

And again, don't use vendor prefixes for CSS3 properties that don't need prefixes. It triples the amount of css for absolutely no benefit. Keep your code lean.

true.

[Antechinus]

If you're doing custom work and you're not sure which CSS3 properties still need prefixes, and you can't be bothered looking them up, and you don't want to have to write piles of css but you want it all to work, try this: http://leaverou.github.com/prefixfree/#

Very light and clean plugin. Haven't used it myself yet, but the person who coded it knows her stuff and it's getting good feedback.

ETA: Just for the record, offhand I can tell you that border-radius, box-shadow, and text-shadow all seem fine without prefixes. Transitions and gradients are the main problem, among the eye candy.

Some of the structural stuff (like box-sizing) still requires prefixes too.

[Colin]

Cool stuff. Thanks for that Antechinus. I will give it a try.

[Joker™]

If you're doing custom work and you're not sure which CSS3 properties still need prefixes, and you can't be bothered looking them up, and you don't want to have to write piles of css but you want it all to work, try this: http://leaverou.github.com/prefixfree/#

Great. For sure going to play with it for some time .

Thanks Ant.

[Hj Ahmad Rasyid Hj Ismail]

Keep up Colin.

[TheListener]

I know this mods topic is rather quiet (too darn quiet IMO) but as an FYI toanyone interested the corners of animated avatars also become rounded.

Colin keep them coming.

[Colin]

Thank you Mr. Fossil.

[BSD2000]

How about a simple check box added to a user's profile settings so the users can manually turn on and off the rounded corners?

Just a thought.

Nice mod btw. 

[TheListener]

How about a simple check box added to a user's profile settings so the users can manually turn on and off the rounded corners?

Just a thought.

Nice mod btw. 

How many users would know of such setting.

This would imo not be easy to do per individual.

[Colin]

How about a simple check box added to a user's profile settings so the users can manually turn on and off the rounded corners?

Just a thought.

Nice mod btw. 

Thanks, sounds like an interesting idea. I will implement it in the next release.

[TheListener]

How about a simple check box added to a user's profile settings so the users can manually turn on and off the rounded corners?

Just a thought.

Nice mod btw. 

Thanks, sounds like an interesting idea. I will implement it in the next release.

tbh I'd keep it as standard.

How many users are gonna be bothered with the setting?

[Colin]

I don't think many so there could be a default, but if some didn't want it they could disable it. What do you think?

[Chen Zhen]

I don't think many so there could be a default, but if some didn't want it they could disable it. What do you think?

Colin,

  Imo that would be the ideal setup.

[Antechinus]

One more thing to check against the database for every user = no free performance lunch.

[Shambles]

I think a settings option wouldn't be a bad thing. On my forum quite a few members take their country flag as an avatar, which looks rather awkward when rounded off.

It'd be easy to implement a switch using custom profile settings.

[Antechinus]

If quite a few members use avatars that would look wrong when rounded off, why would you install the mod? Anyone can make their own rounded avatar if they really want to (mine being an example).

[snadge]

mod did not work for me

smf 205

[Shambles]

mod did not work for me

And with that, your Honour, the prosecution rests its case 

[Colin]

mod did not work for me

smf 205

Will you please provide a link to your forum. Did you get an error in installation?

[littlenicki]

Hello Colin,

could you please also do a SMF 1.1 Version of this Mod?

Thank you

[MaryLouW]

The mod didn't work for me either.  I just installed it but the only avatar that has rounded corners is mine and that's because I uploaded the avatar with the corners already rounded.   

There were no error messages when I installed it.  What do you suggest?   I'm running 2.0.8 if that makes a difference.

http://pirc-forum.com 

[Colin]

Can you provide a demo account, since we can't see any of the members' avatars.

[MaryLouW]

You can use Phedra   and password   doll1010   - mine will be with rounded corners but no one elses.

[Arantor]

What browser are you using?

[MaryLouW]

I tried using both FireFox and IE.  Neither showed rounded corners other than the one that was created that way.

[Colin]

That password doesn't seem to be working.

-C

[MaryLouW]

I changed it when I realized that I should not have posted it in public.  I'll send you a private PM and then give that account the appropriate access.   Thanks for getting back with this. 

[Colin]

It looks like the mod did not install properly. Can you give me access to the package manager so I can investigate?

[MaryLouW]

You should have that access but maybe you tried it before I got the account set up for Admin.  If you still can't access the package manager, let me know.   There weren't any errors when I installed it.

[Colin]

Ah, I really need to update this mod so it works properly with custom themes.

I did just end up making the change on your theme's index.css so it should be working properly now.

[MaryLouW]

Ah, I really need to update this mod so it works properly with custom themes.

I did just end up making the change on your theme's index.css so it should be working properly now.

Thank you!!!  It looks very nice!   I like it.    Now, can you please tell me what you changed in the event that I want to change it back?  Will they still be rounded when I switch to another theme?   I only have one additional theme but am working on several more. We like to change for the major holidays. 

[Colin]

When you install a mod and you are using a custom theme make sure to select the additional themes to install the mod for. I simply uninstalled the modification and reinstalled it selecting both of the two additional themes you have installed. If you install another theme and want the modification to apply to that one. Uninstall the mod and reinstall it selecting the new theme.

[MaryLouW]

OH!  Well, I think I can handle that. Sounds pretty simple!  I've never used different themes before - I've always used the same one and just uploaded the needed graphics for that period of time.  I'm learning - slow but sure!!

Love the rounded corners.  Are there any parameters to make the corners more rounded if desired?

[Colin]

As of now no not unless you manually change it but I plan on making an upgrade to that soon.

[MaryLouW]

That sounds good - would definitely be a nice feature.  I'll be looking forward to seeing that happen.  Thanks!!