• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Shadow around User Container?


Active member
In the message layout, how can I add a subtle drop-shadow effect around the entire User Container block (including the little arrow) ? I've seen this on a few sites, and thought it looked really nice.



Well-known member
You could add the following to Extra.css changing the colour to your preference and setting the spread value also to your preference. or do it via Style properties >> Message layout >> User info container and add the following box-shadow: 0 0 7px red;

.messageUserBlock {box-shadow: 0 0 10px red;}


Well-known member
I only briefly played with trying to shadow the arrow but it does it in a way that it gets squared off so looks really odd. You would be best increase the spread.

With regards to the directions it's a matter of you tinkering with the values. For example this snippet I just added box-shadow: 15px 5px 10px red, -10px 15px 10px green; will give you so it's a matter of just playing around with thevalues till you get the directions, spread (that will cover the arrow) just the way you want it.



Active member
Thanks very much, @Shelley :) Directions look great now - maybe when I get home, I'll just Photoshop the arrow with shadows. I'm curious though, how does a site like xenForo have a border around the arrow?

PS your smilies website has such an awesome Halloween theme!!!! Great work !