1. 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?

Discussion in 'Styling and Customization Questions' started by Peace, Oct 24, 2013.

  1. Peace

    Peace 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.

  2. Shelley

    Shelley 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;}
    Peace likes this.
  3. Peace

    Peace Active Member

    Thanks @Shelley ! Is there a way to also include the arrow to be shadowed?
    Last edited: Oct 24, 2013
  4. Shelley

    Shelley 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.

  5. Peace

    Peace 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 !
    Shelley likes this.
  6. Peace

    Peace Active Member

    Solved! In case anyone happens to search for the same thing:

    .messageUserBlock {-webkit-filter: drop-shadow(2px 2px 2px #d5d5d5); }
    viper357 and Shelley like this.

Share This Page