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

XF 1.3 How To Add Shadow on Content Background?

Discussion in 'Styling and Customization Questions' started by Jericho M, Feb 24, 2014.

  1. Jericho M

    Jericho M Member

    Hi there!

    I want to add shadow on the content background of my forum like this:

    Screenshot - 2_24_2014 , 3_08_01 PM.png

    How can I apply this on my forum?
  2. Jericho M

    Jericho M Member

    I want to minimize it a little bit just like this

    Screenshot - 2_24_2014 , 3_14_11 PM.png
  3. Amaury

    Amaury Well-Known Member

    You can use box-shadow for that.
  4. Jericho M

    Jericho M Member

    Of course. Can you make it more detailed please? Is this an Add-on, a code to put on EXTRA.css or what?
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Add box-shadow in EXTRA.css, like so:

    Amaury likes this.
  6. Jericho M

    Jericho M Member

    Hi @Brogan thank you but can you please give me the complete code so that I can copy and paste it on EXTRASS.css? I'm sorry not a programmer.
  7. Sheldon

    Sheldon Well-Known Member


    He did.
    Amaury likes this.
  8. vishall

    vishall Active Member

    #content .pageContent
        box-shadow: 0 5px 30px #000000;
  9. Jericho M

    Jericho M Member

    Look what happend to my footer after adding this code on EXTRASS.css

    Screenshot - 2_25_2014 , 8_13_22 AM.png
  10. Jericho M

    Jericho M Member

    What I mean is the code not a screenshot.
  11. Amaury

    Amaury Well-Known Member

    The code was in the screenshot, Jericho.
  12. Sheldon

    Sheldon Well-Known Member

    That's something on your end then... impossible to figure out without a link. I just added it here, "live", and it didn't happen.


    He gave you the code. Are you not able to type?
    Amaury likes this.
  13. Jericho M

    Jericho M Member

    Thank you Guy's but if adding shadows makes the footer ugly it's useless.

    Thanks @Amaury @Sheldon and @Brogan for the help really appreciated..
  14. DEZero

    DEZero Well-Known Member

    you'll have to do a box-shadow that only applies to the right and left of content, to add the footer you'll have to apply bottom as well as right left(to the footer css) to get it to align with the main content area.

Share This Page