Legacy Rounded Corners

[GoodApples]

/* Infopanel Avatar border and rounded */
This is a small thing but I think it would be great to have rounded corners on the avatar infopanels

Until then does anyone know how to do it with the additional.css

 

[Ozzy47]

So you just want rounded corners on the avatar that is inside the info panels block?

I will work on this when I get home from work later on today.

 

[Ozzy47]

Ok here is the solution:

Open the template DragonByte Tech: InfoPanels Templates/dbtech_infopanels_panel

Search for the following code:

<img src="{vb:raw avatar.0}" alt="{vb:rawphrase edit_avatar}"{vb:raw avatar.1} />

And replace it with this:

<img src="{vb:raw avatar.0}" style= -moz-border-radius:10px; alt="{vb:rawphrase edit_avatar}"{vb:raw avatar.1} />

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.

 

[Ozzy47]

Cross Browser Solution

@GoodApples @Valcav

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.

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, DragonByte Tech: InfoPanels Templates/dbtech_infopanels_panel

Now open the template DragonByte Tech: InfoPanels Templates/dbtech_infopanels_panel

Search for the following code:

<img src="{vb:raw avatar.0}" alt="{vb:rawphrase edit_avatar}"{vb:raw avatar.1} />

And Replace it with this:

<img src="{vb:raw avatar.0}" class= "rounded" style= alt="{vb:rawphrase edit_avatar}"{vb:raw avatar.1} />

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.

 

[Ozzy47]

Resolved in pm, followed the instructions in post #4 and it is displaying as intended on GoodApples site.

 

[Erica]

@GoodApples @Valcav

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.

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, DragonByte Tech: InfoPanels Templates/dbtech_infopanels_panel

Now open the template DragonByte Tech: InfoPanels Templates/dbtech_infopanels_panel

Search for the following code:

<img src="{vb:raw avatar.0}" alt="{vb:rawphrase edit_avatar}"{vb:raw avatar.1} />

And Replace it with this:

<img src="{vb:raw avatar.0}" class= "rounded" style= alt="{vb:rawphrase edit_avatar}"{vb:raw avatar.1} />

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 did it this way and it doesn't work on IE 8 i only really use FF but was testing and only works on FF.

 

[Ozzy47]

You should update IE to the latest version v9 Internet Explorer - Web Browser for Microsoft Windows

 

[Erica]

Ok i don't really use IE but will update it on this PC oh btw you did see what i wrote in chatbox of errors you got here in 4.1.7 update.

 

[Ozzy47]

I would post the issues you see wrong with the site here: Site Support

 

[GoodApples]

You should update IE to the latest version v9 Internet Explorer - Web Browser for Microsoft Windows

Yeah does not work on IE 8
Which is why it did not work for me and I also have updated to version 9 to have it work.
Personally I use FF but it's for the members who are on IE

---------- Post added 18th January 2012 at 21:21 ---------- Previous post was 9th October 2011 at 08:10 ----------

Loving the rounded corners. maybe next update by default or an option.

Thanks Ozzy47