Simple Machines Community Forum

Customizing SMF => Modifications and Packages => Topic started by: Colin on December 23, 2012, 05:48:21 PM

Title: Avatar Rounded Corners
Post by: Colin on December 23, 2012, 05:48:21 PM
Link to Mod (http://custom.simplemachines.org/mods/index.php?mod=3575)

Avatar Rounded Corners by Colin

Author: Colin (http://www.simplemachines.org/community/index.php?action=profile;u=328403)

Summary

This modification adds soft edges or rounded corners to all avatars.

(http://creativecommons.org/licenses/by/3.0/)
Title: Re: Avatar Rounded Corners
Post by: Antechinus on December 23, 2012, 05:54:22 PM
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:


.avatar>a>img
{
border-radius: 6px;
}
Title: Re: Avatar Rounded Corners
Post by: Colin on December 23, 2012, 10:23:22 PM
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.
Title: Re: Avatar Rounded Corners
Post by: Antechinus on December 24, 2012, 02:56:41 PM
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
Title: Re: Avatar Rounded Corners
Post by: Mick. on December 26, 2012, 08:31:47 PM
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.


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

}


See attachment,
Title: Re: Avatar Rounded Corners
Post by: xrunner on December 26, 2012, 08:36:02 PM
Testing now at my forum - looks pretty cool.  :)
Title: Re: Avatar Rounded Corners
Post by: Mick. on December 26, 2012, 08:39:09 PM
Heck you can even put a nice shadow too!


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);


Title: Re: Avatar Rounded Corners
Post by: Antechinus on December 26, 2012, 11:49:04 PM
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. ;)
Title: Re: Avatar Rounded Corners
Post by: Mick. on December 26, 2012, 11:51:09 PM
Quote from: Antechinus on December 26, 2012, 11:49:04 PM
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. ;)
Title: Re: Avatar Rounded Corners
Post by: Antechinus on December 26, 2012, 11:55:17 PM
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.
Title: Re: Avatar Rounded Corners
Post by: Colin on December 27, 2012, 12:03:34 AM
Cool stuff. Thanks for that Antechinus. I will give it a try.
Title: Re: Avatar Rounded Corners
Post by: Jokerâ„¢ on December 27, 2012, 12:06:43 AM
Quote from: Antechinus on December 26, 2012, 11:55:17 PM
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.
Title: Re: Avatar Rounded Corners
Post by: Hj Ahmad Rasyid Hj Ismail on December 27, 2012, 02:35:35 AM
Keep up Colin.
Title: Re: Avatar Rounded Corners
Post by: TheListener on May 25, 2013, 11:41:05 PM
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.

:) :)
Title: Re: Avatar Rounded Corners
Post by: Colin on May 30, 2013, 12:14:38 PM
Thank you Mr. Fossil.
Title: Re: Avatar Rounded Corners
Post by: BSD2000 on May 31, 2013, 05:26:42 PM
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.  :)
Title: Re: Avatar Rounded Corners
Post by: TheListener on May 31, 2013, 06:32:33 PM
Quote from: BSD2000 on May 31, 2013, 05:26:42 PM
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.
Title: Re: Avatar Rounded Corners
Post by: Colin on May 31, 2013, 07:50:49 PM
Quote from: BSD2000 on May 31, 2013, 05:26:42 PM
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.
Title: Re: Avatar Rounded Corners
Post by: TheListener on May 31, 2013, 07:54:03 PM
Quote from: Colin on May 31, 2013, 07:50:49 PM
Quote from: BSD2000 on May 31, 2013, 05:26:42 PM
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?

Title: Re: Avatar Rounded Corners
Post by: Colin on May 31, 2013, 09:32:30 PM
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?
Title: Re: Avatar Rounded Corners
Post by: Chen Zhen on May 31, 2013, 10:34:42 PM
Quote from: Colin on May 31, 2013, 09:32:30 PM
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.
Title: Re: Avatar Rounded Corners
Post by: Antechinus on June 01, 2013, 02:58:58 AM
One more thing to check against the database for every user = no free performance lunch. ;)
Title: Re: Avatar Rounded Corners
Post by: Shambles on June 01, 2013, 06:35:16 AM
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.
Title: Re: Avatar Rounded Corners
Post by: Antechinus on June 01, 2013, 06:39:49 PM
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).
Title: Re: Avatar Rounded Corners
Post by: snadge on August 16, 2013, 05:23:31 PM
mod did not work for me

smf 205
Title: Re: Avatar Rounded Corners
Post by: Shambles on August 16, 2013, 05:25:31 PM
Quote from: snadge
mod did not work for me

And with that, your Honour, the prosecution rests its case  ::)
Title: Re: Avatar Rounded Corners
Post by: Colin on August 16, 2013, 06:18:48 PM
Quote from: snadge on August 16, 2013, 05:23:31 PM
mod did not work for me

smf 205

Will you please provide a link to your forum. Did you get an error in installation?
Title: Re: Avatar Rounded Corners
Post by: littlenicki on September 09, 2013, 06:56:58 AM
Hello Colin,

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

Thank you
Title: Re: Avatar Rounded Corners
Post by: MaryLouW on July 30, 2014, 05:37:46 PM
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 
Title: Re: Avatar Rounded Corners
Post by: Colin on July 30, 2014, 10:05:59 PM
Can you provide a demo account, since we can't see any of the members' avatars.
Title: Re: Avatar Rounded Corners
Post by: MaryLouW on July 30, 2014, 10:12:35 PM
You can use Phedra   and password   doll1010   - mine will be with rounded corners but no one elses.
Title: Re: Avatar Rounded Corners
Post by: Arantor on July 31, 2014, 05:15:17 AM
What browser are you using?
Title: Re: Avatar Rounded Corners
Post by: MaryLouW on July 31, 2014, 02:47:10 PM
I tried using both FireFox and IE.  Neither showed rounded corners other than the one that was created that way.
Title: Re: Avatar Rounded Corners
Post by: Colin on August 02, 2014, 03:49:35 PM
That password doesn't seem to be working.

-C
Title: Re: Avatar Rounded Corners
Post by: MaryLouW on August 02, 2014, 08:27:44 PM
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. 
Title: Re: Avatar Rounded Corners
Post by: Colin on August 02, 2014, 08:33:48 PM
It looks like the mod did not install properly. Can you give me access to the package manager so I can investigate?

Title: Re: Avatar Rounded Corners
Post by: MaryLouW on August 02, 2014, 09:17:43 PM
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.
Title: Re: Avatar Rounded Corners
Post by: Colin on August 03, 2014, 04:59:39 AM
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.


Title: Re: Avatar Rounded Corners
Post by: MaryLouW on August 03, 2014, 03:25:30 PM
Quote from: Colin on August 03, 2014, 04:59:39 AM
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. 
Title: Re: Avatar Rounded Corners
Post by: Colin on August 04, 2014, 01:55:04 AM
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.
Title: Re: Avatar Rounded Corners
Post by: MaryLouW on August 04, 2014, 02:34:03 AM
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?
Title: Re: Avatar Rounded Corners
Post by: Colin on August 05, 2014, 11:20:48 AM
As of now no not unless you manually change it but I plan on making an upgrade to that soon.
Title: Re: Avatar Rounded Corners
Post by: MaryLouW on August 05, 2014, 03:50:08 PM
That sounds good - would definitely be a nice feature.  I'll be looking forward to seeing that happen.  Thanks!!