SVG logo shadow?

A quick question, the answer is probably no, but can you add a drop shadow to an SVG logo? Not a box shadow, but to give the logo a drop shadow in the same way a drop shadow is applied to text?

I have searched the forum, but not found anything!

Thanks in advance for telling me this can’t be done!

Tom

.svg-shadow {
  filter: drop-shadow(5px 5px 12px rgba(0, 0, 0, 0.5));
}
2 Likes

Awesome, thank you. Could you tell me, a non-coder, how and where to apply this code please?

Cheers,
Tom

Check out my screenshot.
Cheers

Fantastic, thank you both. Have a great day :+1:

Tom

Thank you, Richards and Marinator. I’ve been able to use drop shadows now on many of my SVG pics and logo.

Our website is www.prisonministry.org

1 Like

Just so you know, your link at the bottom right that reads “Complete your gift to make an impact” is covering your back-to-top button.

Also, for some odd reason, I noticed the back-to-top button has a slight delay when you click it when viewing your website in Chrome. It works fine in Firefox. I’m guessing you used JavaScript for this button? Might want to check into this.

printninja,

I do not see the link “Complete your gift to make an impact” at the bottom of any page on my site. Could you tell me what page and post a pic of it?

Yes, I’m using JavaScript. Do you know of a different way to code back-to-top which has no delay?

Here’s a screenshot showing the issue…

Any link can take you to the top of the page simply by setting the target to Top. The option is accessible via the Options panel. See below…

image

I make my back-to-top buttons using features available within BSS. I just added one to the online library if you want to try it. Just search for Ultimate Back To Top Button. It’s a very simple component. It looks like this…

image

printninja,

I just added the Ultimate Back To Top Button to our site. Thank you. It works much better than the JavaScript. :smiley:

I still do not see the link “Complete your gift to make an impact” at the bottom of any page on my site. What is the OS you are using? We use Windows 11. Were you attempting to try the donation form? I cannot figure out any way this link would show up. :thinking:

Glad the button worked out for you :slight_smile:

image

It seems to be a widget called dbox-reminder-widget. I was not attempting to do a donation. It simply appeared on the bottom right of the home page when I opened your website.

I am using Windows 7, which is probably the problem. The pic above is a screen capture from Chrome Version 109.0.5414.120 (Official Build) (32-bit) which is the latest version that will run on Windows 7, however I also checked it in the latest desktop Version of Firefox, and it also appears in that browser.

I checked it on my Android phone in both the latest versions of Chrome and Firefox, using both mobile and desktop options on the browsers, and DO NOT see it on my phone.

This leads me to believe it’s a bug in the widget specifically related to running in the Windows 7 environment. Since Windows 7 is now considered obsolete, they probably never tested the widget in Windows 7 when they developed it.

Not really sure how big a deal it is, since only about 3%-5% of computers are still running Windows 7.

printninja,

Your help has been extremely valuable. Thanks. :smiley:

The problem was caused by 2 JavaScripts by DonorBox for their donation forms. I inserted the JavaScripts into the Head Content section years ago (we began using DonorBox back in 2017) and when I made the decision to change to Qgiv in February 2023, I forgot to delete all instances of DonorBox. The phrase “Complete your gift to make an impact” didn’t show in Windows 11, so I didn’t think anything was wrong. :roll_eyes:

I learned something extremely useful to all who design their websites, either for themselves or for others, check for old JavaScripts and any references to scripts no longer used. They might just appear messing up the website for viewers using older operating systems, etc. :thinking:

printninja, one last favor, could you please check out our website again (after clearing the cache)? If I’m correct, the “Complete your gift to make an impact” should not show up anymore.

Thanks.

To all others viewing this forum - this is the most helpful forum I’ve ever used. The members replying have helped me a lot over the years with my using Bootstrap Studio. They go out of their ways to solve problems of other members. Thanks to all of them.