Status
Not open for further replies.

GoodApples

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

Ozzy are you game. :D
 
Upvote 0
This suggestion has been closed. Votes are no longer accepted.
Ok here is the solution:

Open the template User Spotlight Templates/dbtech_spotlight_userinfo

Search for the following code:

HTML:
<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:
<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:
14e7cf377de85b.png


After:
14e7cf2ff79060.png


This will have to be done in each style you want it to show like that.
 
Last edited:
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:
.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:
<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:
<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.
 
Last edited:
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
 
To have the image rounded in the sideblock open the template, User Spotlight Templates/dbtech_spotlight_userinfo_sideblock

Find this bit of code:
HTML:
<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:
HTML:
<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.
 
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.
 
Status
Not open for further replies.
Back
Top