Something small but how rounded corners on the image in the User Spotlight.

Maybe @Ozzy47 would be interested in doing it...InfoPanels Avatar done and now User Spotlight.

Ozzy are you game.

Ok here is the solution:

Open the template User Spotlight Templates/dbtech_spotlight_userinfo

Search for the following code:

HTML Code:

<img src="{vb:raw spot_userdata['pic']}" alt="User Image" border="0" style="max-height: {vb:raw vboptions.dbtech_spotlight_max_height}px; max-width: {vb:raw vboptions.dbtech_spotlight_max_width}px;">

And replace it with this:

HTML Code:

<img src="{vb:raw spot_userdata['pic']}" alt="User Image" border="0" style="max-height: {vb:raw vboptions.dbtech_spotlight_max_height}px; max-width: {vb:raw vboptions.dbtech_spotlight_max_width}px; -moz-border-radius:10px;">

You can replace the 10 in, moz-border-radius:10px; there to more or less, depending on your preferences, bigger the number the more radius.

Before:


After:


This will have to be done in each style you want it to show like that.

Open the template DragonByte Tech: InfoPanels Templates/dbtech_infopanels_panel

@Ozzy47 for User Spotlight ?

OOOps refresh the page I edited the first post lol.

@GoodApples did that work?

Yes @Ozzy47 it does in FireFox
not Internet Explorer but that is to be expected.
Thanks for following up to make sure it worked.

Yeah IE does not take into account the -moz-border-radius: setting, their has been alot of discussion on vB.com, and vB.org over that.

@GoodApples

After doing some research I found a way to work cross browser including IE.

First open the Templates/CSS Templates/additional.css in the style you are working with. Unless you already added this from other post.

Add the following at the bottom of the template.

HTML Code:

.rounded {
  border-radius:1ex;
  -webkit-border-radius:1ex;
  -moz-border-radius:1ex;
}

Then save that.

If you applied the edit in the first post revert the template, User Spotlight Templates/dbtech_spotlight_userinfo

Now open the template User Spotlight Templates/dbtech_spotlight_userinfo

Search for the following code:

HTML Code:

<img src="{vb:raw spot_userdata['pic']}" alt="User Image" border="0" style="max-height: {vb:raw vboptions.dbtech_spotlight_max_height}px; max-width: {vb:raw vboptions.dbtech_spotlight_max_width}px;">

And Replace it with this:

HTML Code:

<img src="{vb:raw spot_userdata['pic']}" alt="User Image" border="0" style="max-height: {vb:raw vboptions.dbtech_spotlight_max_height}px; max-width: {vb:raw vboptions.dbtech_spotlight_max_width}px;" class= "rounded">

If you want more of a radius open the CSS Templates/additional.css
and change all instances of 1 to a higher number, in the .rounded you added there.

I gave the cross browser option in post #8 above a try but did not work for me. I know this may sound odd but I think there may be a bug that is effecting the additional.css in the last couple of vB version starting with 4.1.4
I try again when 4.1.7 comes out. Thanks @Ozzy47

I tested it on 4.1.3 through 4.1.5pl1 and it works as intended.