News:

Wondering if this will always be free?  See why free is better.

Main Menu

Avatar Rounded Corners

Started by Colin, December 23, 2012, 05:48:21 PM

Previous topic - Next topic

Colin

Link to Mod

Avatar Rounded Corners by Colin

Author: Colin

Summary

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

"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

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:


.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.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

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.


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


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.

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

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.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Joker™

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.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

Hj Ahmad Rasyid Hj Ismail


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

"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

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

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.

Colin

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.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

TheListener

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?


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?
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Chen Zhen

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.

My SMF Mods & Plug-Ins

WebDev


"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

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

Quote from: snadge
mod did not work for me

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

Colin

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?
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

littlenicki

Hello Colin,

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

Thank you
Fomer SMF user. Switched to Invision Power Board and VBulletin

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.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

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
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

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?

"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

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.


"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

MaryLouW

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. 

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.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

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.
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

MaryLouW

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

Advertisement: