• 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?

Peace

Active member
#1
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.

Thanks!
 

Shelley

Well-known member
#2
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;
Screenshot_45.png

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

Shelley

Well-known member
#4
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.

Screenshot_46.png
 

Peace

Active member
#5
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 !