Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 14, 2022 at 11:28 pm #1358397
    ewebbdesigns

    My client wants to add just a transition drop shadow where there is white space.

    Site: c522f040-2692-4ac0-8fcf-d2a8981eb400

    Example of drop shadow they want: https://www.drivenperformanceadvisors.com/

    Where they want it: Home Page
    – Below the shot of the Mustang, the slider
    – Below the Our Service blue background
    – Take it off the Text box, that looks odd

    About
    – Below the slider

    Signage
    – Below the slider
    – Below the slider on the Banner page
    – Below the slider on the Trade Show page

    Graphics
    – Below the slider on the Promotional Vehicle page
    – Below the slider Municipality
    – Below the slider Race Car
    – Below the slider Street Vehicle wraps

    Trophies and Awards
    – Below the slider

    Thanks in advance, been struggling for days.

    July 15, 2022 at 1:22 am #1358417
    Mike

    Hey ewebbdesigns,
    Thanks for the link to your example page, I see the box-shadow:
    2022-07-14_010.jpg
    this is the css that creates it:

    .partners {
    background-color: #FAFAFA;
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) inset;
    -webkit-box-shadow: 0 10px 20px rgb(0 0 0 / 20%) inset;
    box-shadow: 0 10px 20px rgb(0 0 0 / 20%) inset;
}

    since you want it in so many different places I would recommend adding a custom class to each element that you want it to show below, but I can’t see your site because the link doesn’t go to it, so please link directly to it.
    Please see our documentation for adding a custom class and try adding the above css, if you need further help please include an admin login in the Private Content area and we can help will some step-by-step instructions for you to address all of your elements.

    Best regards,
    Mike

    July 15, 2022 at 4:17 pm #1358509
    ewebbdesigns

    Hey Mike-

    Thanks for reaching out, I thought I had it, but I guess not. I am providing logins in private content.

    July 15, 2022 at 7:49 pm #1358535
    Rikard

    Hi,

    Thanks for the update. Did you try adding classes and checking the documentation that Mike linked to? If you should run into any problem, or if you can’t add classes to some elements, then please let us know.

    Best regards,
    Rikard

    July 15, 2022 at 7:54 pm #1358537
    ewebbdesigns

    Rikard-

    I did check the documentation, and did add classes, but can’t seem to get it to work.

    July 15, 2022 at 11:30 pm #1358560
    Mike

    Hi,
    Thanks for your feedback, I made an error, the box-shadow I posted above was for inset which shows the shadow on the inside of the element:
    box-shadow: 0 10px 20px rgb(0 0 0 / 20%) inset;
    you would want this instead:
    box-shadow: 0 10px 20px rgb(0 0 0 / 20%);
    I tested this on your homepage, for the full width slider it worked correctly, but for the color section “Our Service” it did not because there is another color section below it with a background color.
    So I added z-index to the css and this solved, I thought the 20% color in the box-shadow was a little light so I changed it to 40% so you can see it better, but feel free to adjust to suit.
    So now the custom class is below-shadow and the css in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field is:

    .below-shadow {
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 10px 20px rgb(0 0 0 / 40%);
    box-shadow: 0 10px 20px rgb(0 0 0 / 40%);
    z-index: 1;
    position: relative;
}

    please clear your browser cache and check the homepage and try to reproduce on your other pages.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.