WCF - Enhanced Avatar +Shadow

[LifesGreatestGift]

Pretty self explanatory. Most people probably already know how to do this but for those who don't... :)

Just makes the avatars look a little nicer. Feel free to edit/style to fit your needs.

Add the following code to additional.css
a.postuseravatar img,.primary img{border:1px solid #D5D5D5;background:white;padding:4px;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.1);box-shadow:0px 2px 2px rgba(0,0,0,0.1);border-image:initial;}
a.postuseravatar img:hover,.primary img:hover{border:1px solid #7D7D7D;-moz-box-shadow:0px 0px 5px #999;-webkit-box-shadow:0px 0px 5px #999;box-shadow:0px 0px 5px #999;}

Enjoy!

http://i293.photobucket.com/albums/mm71/smallvilleproject/demo-avatar-shadow.png

[Robru]

Thanks for sharing this :)

[Dr.osamA]

Thank you
installed

keep it up bro

[Merenguista]

it does'nt work for me :(

[LifesGreatestGift]

it does'nt work for me :(

Link to forum so I can see the code.

[CLICK INSTALL]

[too_cool_3]

Simple, yet effective. Thanks LifesGreatestGift ;) (tagged, will download and try out shortly)

[Strategos]

Wow nice CSS. Thank you very much!

[bulldog51981]

The hoover works, but I'm not getting the border around the avatar. I am using a dark theme, so the white border should be easy to see. On hoover, the glowing white shows up, but that's it. Any ideas?

http://www.stlxr.com

[LifesGreatestGift]

The hoover works, but I'm not getting the border around the avatar. I am using a dark theme, so the white border should be easy to see. On hoover, the glowing white shows up, but that's it. Any ideas?

http://www.stlxr.com

i do not see the
background:white;padding:4px;
at all when reviewing the CSS for your avatars.

You have a dark site so you will first need to fix why the css isnt displaying (didnt paste the code exact as-is in additional.css?) then you will need to change a few colors to blend it with your style.

[blake247]

Nice mod...thanks!

[zeus_r6]

The black line border around the avatars doesn't show up in IE but does in FF, but it still looks good with the extra white border

[Robert8]

Nice and working fine with 4.1.10!!! :up:

[garybrun]

Working fine.
Simple mod... but effective.
Thank you

[nero9]

This type of simple mods give you a richer look. keep post this type of mods

Thank u very Much !

[Boofo]

Nice work, sir. ;)

[prandah]

work like charm :D
mark installed :D

[Robru]

Indeed... Perfect mod!! :)

[Roadtech9563]

Very nice, thanks... :D

[Megaboost]

I find that changing the padding size to 0.5 instead of 4 works better with the darker background themes.

This is a Great Tweak!

[thecore762]

Nice work there!
Really looks good with my dark template :)

[thecore762]

BTW I am having little issues with the padding.
When I mouse over things start moving.

Sample: http://www.47r-squad.com/general-discussion/6-47-ronin-forum-rules.html

[illusioNtEk]

where is the download link?

[LifesGreatestGift]

lol. read the post. all the instructions are there.

[thecore762]

lol. read the post. all the instructions are there.

?

Anyways, is it possible for me to fix the above *post before the other guy*

[LifesGreatestGift]

It 'moves' because your avatars are not centered.

[Bisha]

nice one

[thecore762]

It 'moves' because your avatars are not centered.

I see, is there an easy fix for that?

[prandah]

not work with postbit ?

[AURFSCAN]

not work with postbit ?


postbit, just with shadow




.postbit .postuseravatarlink img {

-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.4);-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.4);box-shadow:3px 3px 3px rgba(0,0,0,0.4);border-image:initial;

}

[Winter Sonata]

works as it should be :)


thanks!

[Emeralda]

Rawr, looks great, I used the shadows as the default for avatars. Now, how to make it so it would be slightly bigger or/and darker on the right and bottom?

[AURFSCAN]

Rawr, looks great, I used the shadows as the default for avatars. Now, how to make it so it would be slightly bigger or/and darker on the right and bottom?


change all instances of rgba(0,0,0,0.1) in code to eg. rgba(0,0,0,0.4), rgba(0,0,0,0.6) etc

[Emeralda]

change all instances of rgba(0,0,0,0.1) in code to eg. rgba(0,0,0,0.4), rgba(0,0,0,0.6) etc

I'm using this: a.postuseravatar img,.primary img{border:1px solid #7D7D7D;-moz-box-shadow:0px 0px 5px #999;-webkit-box-shadow:0px 0px 5px #999;box-shadow:0px 0px 5px #999;} and there's no rgba there >.<

[safakuygur]

very good thanks

[Trevor Matthews]

Hi

I have just edited the additional.css file but the shadow does not appear in Firefox.
It does appear in Internet Explorer.
Anything I can do to correct it?

[HHelp1]

not working here :(

[egclive]

Install instructions i cant figure it out.

[faisaly.com]

Simple if your using a lighter style... you can go to styles and templates/search templates enter in the box additional.css , search in all styles , search titles only, then select the additional.css for the style you want to add the code to the bottom of the window... I can't help with any of the rgb colors and shadows cuz i use a dark style...

Maybe someone with a dark style that has a nice setup in this code will share it with us....

[egclive]

theres no save button on additional css

[ringnews24]

Thanks, it does as it says, brilliant.

[datoneer]

I have changed postbit to horizontal and now doesn't work

[Cusski]

Rawr, looks great, I used the shadows as the default for avatars. Now, how to make it so it would be slightly bigger or/and darker on the right and bottom?


a.postuseravatar img,.primary img{border:1px solid #D5D5D5;background:white;padding:2px;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.1);box-shadow:5px 5px 5px rgba(0,0,0,0.5);border-image:initial;}
a.postuseravatar img:hover,.primary img:hover{border:1px solid #7D7D7D;-moz-box-shadow:0px 0px 5px #999;-webkit-box-shadow:0px 0px 5px #999;box-shadow:5px 5px 5px #999;}