Change the size of the icons in the connectionBox

Hello,
I want to change the size of the Remove Friend, offline, online, send private message, etc. icons in the connectionBox but the sizes are fixed at 16x16px. Where can I change those size?

I created larger icons but now they just overlap.

Thanks,
David

None of the sizes are fixed through CSS or HTML. Just upload larger images (replacing the existing ones). For instance the message (PM and Email) icons is 18x12 while the remove icon is 16x16. Inspecting with firebug reveals no size specific CSS or HTML. None of the icons have specific classes either so you'll need complex selectors as follows to adjust them individually through CSS.

Remove Icon
.connectionBox img[title~="Remove"]

Profile Icon
.connectionBox img[title~="Profile"]

Email Icon
.connectionBox img[title~="Email"]

PM Icon
.connectionBox img[title~="Message"]

The above assumes the titles haven't be changed through language plugins. Online status icons have classes as follows as is sized/styled purely though CSS.

Online
.cb_online

Offline
.cb_offline

Hi krileon,
I already tried what you suggested and uploaded a larger icon. As you can see in the attached, it simple "underlaps" the image below it.

I too searched via Firebug but found no size, padding or margin options.

Ah, I see; wasn't clear what you meant by overlap. The size of the box it self is very restrictive and you'll need to increase that too. Please see the below CSS needed.

The above is another situation where classes are lacking so a bit of CSS trickery was needed. Other adjustments may need to be made to expand the box. This can be done much easier with CSS3 selectors, but don't advise using them until IE8-9 is more widely used; other browsers don't have issues with CSS3. Please note the important tag (doesn't work in IE6, but no longer an issue these days) is vital as in-line styles always have higher weigh then class styles; without the tag the in-line will just override your CSS.