Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 17, 2014 at 5:54 pm #369601
    JMDP

    Hi,
    I have a “Boxed layout”.
    I have chosen an image as “Background Image”.
    I’d like to produce a Shadow box effect around or beside (right and left) the main body area in order to create a “light” Shadowed distinction in between the background an the main content.

    I’m not a coder and have tried many CSS tricks…but could find the right way to correctly do it i the “Quick CSS” section.

    Anybody can help?

    In advance thanks you.

    PS : Yes I do love Enfold
    :-)

    December 17, 2014 at 5:57 pm #369604
    Yigit

    Hi Ad-Min7477!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    .boxed #wrap_all {
box-shadow: 0 10px 10px #666666;
}

    Thank you for loving Enfold :)

    Regards,
    Yigit

    December 17, 2014 at 7:11 pm #369671
    JMDP

    Wow…
    Thanks, Yigit, it looks great!

    December 17, 2014 at 7:13 pm #369672
    JMDP
    This reply has been marked as private.
    December 17, 2014 at 8:24 pm #369703
    Yigit

    Hi!

    Can you post the link to your website please?
    Merry Christmas to you too :)

    Best regards,
    Yigit

    December 18, 2014 at 10:42 am #369891
    JMDP

    Hi Yigit,
    I’m afraid I can’t as far as it’s an intranet and you won’t be able to reach it.
    Would you like code? If so, which part?
    Let me know.
    Best.

    December 18, 2014 at 3:50 pm #369988
    Yigit

    Hey!

    Please try adding following code to Quick CSS 

    footer#socket {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
div#header_meta {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

    Best regards,
    Yigit

    December 18, 2014 at 3:56 pm #369995
    JMDP

    Yep, it works,
    but there’s a white or “light grey” background which makes the angles still visible on the blue-like backgroung pictcure.
    If the colour could be “transparent” that would be fine.

    December 18, 2014 at 4:00 pm #369998
    Yigit

    Hey!

    Can you please post a screenshot and show? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here

    Best regards,
    Yigit

    December 18, 2014 at 4:51 pm #370043
    JMDP
    This reply has been marked as private.
    December 18, 2014 at 5:29 pm #370083
    Yigit

    Hey!

    Please change the code to following one

    footer#socket {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
div#header_meta, header#header, div#wrap_all, body#top, div#main, .header_bg {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

    Best regards,
    Yigit

    December 18, 2014 at 5:34 pm #370089
    JMDP

    Works when you refresh the page,
    but re-become as it was (with white angled corners) when you scroll down.

    December 18, 2014 at 5:37 pm #370092
    Yigit

    Hey!

    That is expected behaviour when you are using a sticky header, what you see when you scroll down is page content.

    Best regards,
    Yigit

    December 18, 2014 at 6:07 pm #370118
    JMDP

    Ah, OK, it’s fine.
    Thank you very much for your help,Yigit.
    Thank you, Kriesi!
    Pretty good looking now.
    Enjoy.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Body Shadow box effect’ is closed to new replies.