Add Border and Shadow effect to the profile photo

[Bernard Lama]

Add Shadow and border effect to the profile photo.

Instruction: Copy and paste the following code into Advanced CSS box.

 

The Code

.xg_widget_profiles_profile .dy-avatar.dy-avatar-full-width{

padding-bottom: 93%;
max-width: 93%;
margin: 5px;
width: auto;
float: left;
text-align: center;
border: white 2px solid;
box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888888;
-webkit-box-shadow: 0 0 10px #888;
margin-left: 5px!important;
}

 

Want to give a different look to your network?  Contact me for a quote. 

Example:

[Bernard Lama]

Thanks...

[Bernard Lama]

Thanks...

[shrawan bomjan]

i like ...this : thx bro

[DJ Bradley]

Another great styling tip! Thank you Bernard!

[Bernard Lama]

Glad you liked it. thanks

[Sandra]

Hi Bernard,

very cool! Thanks a lot for sharing. Well, I've tried to add shadow to the left & right of the body. (Don't know how to explain it in english...sorry). I've attached an image, please have a look at the red arrow. Hope you can help me :)

[Bernard Lama]

Thanks Sandra. Use this code in advanced CSS

#xg_body {
-moz-box-shadow:
inset 5px 0 5px -5px #333,
inset -5px 0 5px -5px #333;
-webkit-box-shadow:
inset 5px 0 5px -5px #333,
inset -5px 0 5px -5px #333;
box-shadow:
inset 5px 0 5px -5px #333,
inset -5px 0 5px -5px #333;
}

[Sandra]

Thanks Bernard. My width is 1024px, so I've add it to the style. But how can set the shadows outside? I've tried, "inset" change to "outset", but it doesn't work...I've also played with the px-sizes - without success: (

I would be very happy if you could help me again.

 

[Bernard Lama]

You are welcome Sandra. Well, I can't say anything coz I don't know the problem of your site.

But the above code is the right code for everyone. 

[Sandra]

Maybe it's because I've change the width of the theme?

Well, here is a sreenshot. The shadow is inside the body...

[Bernard Lama]

Can you show me your site link?