#1
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
 

Ozzy47

Former Developer
Customer
#2
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:


After:


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

Ozzy47

Former Developer
Customer
#7
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

Former Developer
Customer
#8
@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:
#9
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

Former Developer
Customer
#11
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.
 

Ozzy47

Former Developer
Customer
#12
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.
 

User Spotlight

vBulletin 3.8.x vBulletin 4.x.x
Seller
DragonByte Technologies
Release date
Last update
Total downloads
2
Customer rating
0.00 star(s) 0 ratings
Top