Rounded Corners For Avatars?

[nyos]

Is there a way to make it so that all avatars have rounded corners (that is, if they're not a custom image that has a transparent bg)?

[Stinky666]

May 24, 2013 12:05:55 GMT -8 nyos said:

Is there a way to make it so that all avatars have rounded corners (that is, if they're not a custom image that has a transparent bg)?

Admin > Themes > Advanced Styles & CSS > Style Sheet
(On a default theme, go to line 1157 and find):

.mini-profile .avatar { max-width: 150px; max-height: 150px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }

Now add the red bits below:

.mini-profile .avatar { max-width: 150px; max-height: 150px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; border: #000000 solid 2px; .rounded-corners(10px, 10px, 10px, 10px); }


Set the border hex code to be the same colour as your mini profile background, that way it will look right
Set the width to anything you prefer, too.
Change the parts after .rounded-corners to any size you prefer


Edit:
To note, this will be the mini profile only. If you want it on the profile and edit profile, let me know

[nyos]

May 24, 2013 12:45:17 GMT -8 Stinky666 said:

May 24, 2013 12:05:55 GMT -8 nyos said:

Is there a way to make it so that all avatars have rounded corners (that is, if they're not a custom image that has a transparent bg)?

 


Edit:
To note, this will be the mini profile only. If you want it on the profile and edit profile, let me know

Yes, in fact that would be great bud! Actually, I don't know if it's possible or not, but since we're doing this for avatars and we're into it now... could it be done for the avatars as icons for the original author of a thread? I've got that coding implemented into my forum as well (thanks to you for helping on that btw!) and if it could do the same for those it would be rockin!

[nyos]

Also, is there an alternative to using a hex numeric color and rather use an opacity setting? In other words, rather than have a color rounded border, make the border transparent? I ask because of two reasons... 1) My mini profile bg is more of a gradient than one solid color, and 2) Some avatars are not going to be uniform in that they will all be the same size. Some avatars (I've noted since implementing this edit) are smaller in both height and width and the outer border shows itself. Any ideas?

[Stinky666]

nyos, replace the #000000 with:
rgba(0,0,0,.9)

.9 is the opacity.
the 0,0,0 of course is the RGB that you'd need to know.

Will have a look at the other avatar borders soon - only just woke up


Edit:
For the thread list avatars for created by, go to your style sheet and add the part in blue to the rest of the CSS that you should already have at the bottom..

.threads .avatar_size_small { height: 25px; width: 25px; border: #000000 solid 2px; .rounded-corners(10px, 10px, 10px, 10px); }
.threads .avatar_size_small > img { max-height: 25px; width: 25px; border: #000000 solid 2px; .rounded-corners(10px, 10px, 10px, 10px); }


As with the above, change the HEX code for the RGBA

---

On line 1162 - 1170, you should see:
.avatar_size_default, .avatar_size_default embed, .avatar_size_default object, .avatar_size_default > div, .avatar-wrapper.avatar_size_default > div > div { height: 150px; width: 150px; }
.avatar-wrapper > div > div { display: table-cell; vertical-align: middle; }
.avatar_size_default img, .avatar_size_default default { max-height: 150px; max-width: 150px; }
.avatar_size_medium, .avatar_size_medium embed, .avatar_size_medium object, .avatar_size_medium > div, .avatar-wrapper.avatar_size_medium > div > div { height: 75px; width: 75px; }
.avatar_size_medium img, .avatar_size_medium default { max-height: 75px; max-width: 75px; }
.avatar_size_small, .avatar_size_small embed, .avatar_size_small object, .avatar_size_small > div, .avatar-wrapper.avatar_size_small > div > div { height: 50px; width: 50px; }
.avatar_size_small img, .avatar_size_small default { max-height: 50px; max-width: 50px; }
.avatar_size_quote, .avatar_size_quote embed, .avatar_size_quote object, .avatar_size_quote > div, .avatar-wrapper.avatar_size_quote > div > div { height: 30px; width: 30px; }
.avatar_size_quote img, .avatar_size_quote default { max-height: 30px; max-width: 30px; }

Turn it into (this will effect quote avatars, profiles, mini profiles and micro profiles)
.avatar_size_default, .avatar_size_default embed, .avatar_size_default object, .avatar_size_default > div, .avatar-wrapper.avatar_size_default > div > div { height: 150px; width: 150px; }
.avatar-wrapper > div > div { display: table-cell; vertical-align: middle; }
.avatar_size_default img, .avatar_size_default default { max-height: 150px; max-width: 150px; border: #000000 solid 2px; .rounded-corners(10px, 10px, 10px, 10px); }
.avatar_size_medium, .avatar_size_medium embed, .avatar_size_medium object, .avatar_size_medium > div, .avatar-wrapper.avatar_size_medium > div > div { height: 75px; width: 75px; }
.avatar_size_medium img, .avatar_size_medium default { max-height: 75px; max-width: 75px; border: #000000 solid 2px; .rounded-corners(10px, 10px, 10px, 10px); }
.avatar_size_small, .avatar_size_small embed, .avatar_size_small object, .avatar_size_small > div, .avatar-wrapper.avatar_size_small > div > div { height: 50px; width: 50px; }
.avatar_size_small img, .avatar_size_small default { max-height: 50px; max-width: 50px; border: #000000 solid 2px; .rounded-corners(10px, 10px, 10px, 10px); }
.avatar_size_quote, .avatar_size_quote embed, .avatar_size_quote object, .avatar_size_quote > div, .avatar-wrapper.avatar_size_quote > div > div { height: 30px; width: 30px; }
.avatar_size_quote img, .avatar_size_quote default { max-height: 30px; max-width: 30px; border: #000000 solid 2px; .rounded-corners(10px, 10px, 10px, 10px); }

Again, edit the hex codes to your liking (swapping #000000 with rgba(0,0,0,.9)

[nyos]

It worked for the thread list view, but not for the mini profile and the rest. The rounding of the corners worked clear across the board. But the color of the border remained for everything but the thread list (doubled for the mini profile). I have a feeling it's because the color that I put in for the bg for the thread list view took, but the opacity/transparency for the others didn't because of the alternating windows along with the fact that the mini profile bg's are a gradient and the profile view bg is a different color (that I could have adjusted to fit so I'm sure that would have worked as well. So I guess what I'm getting at here is that the Mini profile is still showing a colored border that doesn't blend with it's background and not coming out as a transparent border. Hmmm....

[Stinky666]

May 25, 2013 14:36:30 GMT -8 nyos said:

It worked for the thread list view, but not for the mini profile and the rest. The rounding of the corners worked clear across the board. But the color of the border remained for everything but the thread list (doubled for the mini profile). I have a feeling it's because the color that I put in for the bg for the thread list view took, but the opacity/transparency for the others didn't because of the alternating windows along with the fact that the mini profile bg's are a gradient and the profile view bg is a different color (that I could have adjusted to fit so I'm sure that would have worked as well. So I guess what I'm getting at here is that the Mini profile is still showing a colored border that doesn't blend with it's background and not coming out as a transparent border. Hmmm....

Could you possibly link to the forum you've done it on, making sure I,a s a guest, can view both the forum (and a thread) along with the theme you are using it on?

Also, in the mean time, perhaps reset line 1157 back to how it was, removing the border from that entirely, to see if that solves the double border issue.