Legacy User Spotlight Round Corners

[GoodApples]

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.

 

[Ozzy47]

Ok here is the solution:

Open the template User Spotlight Templates/dbtech_spotlight_userinfo

Search for the following 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:

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

 

[GoodApples]

Open the template DragonByte Tech: InfoPanels Templates/dbtech_infopanels_panel

Ozzy47 for User Spotlight ?

 

[Ozzy47]

OOOps refresh the page I edited the first post lol.

 

[Ozzy47]

GoodApples did that work?

 

[GoodApples]

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

 

[Ozzy47]

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.

 

[Ozzy47]

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

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

<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:

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

 

[GoodApples]

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

 

[Ozzy47]

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

 

[Ozzy47]

To have the image rounded in the sideblock open the template, User Spotlight Templates/dbtech_spotlight_userinfo_sideblock

Find this bit of code:

<img src="{vb:raw content.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 change it to this:

<img src="{vb:raw content.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">

Must have done the rounded css edit as well in additional css.

 

[Ozzy47]

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

Resolved in pm, followed the instructions in post #8 and it is displaying as intended.

 

[lockejcole]

Nice one, thanks