dearnaomichan Posted May 24, 2021 Share Posted May 24, 2021 Site URL: https://www.redmondfunding.com/ For some reason the SVG links for this website aren't showing up on the live site but showing on the editor. It's the arrows on the right side of the accordion. on this page: https://redmond-funding-group.squarespace.com/loan-programs pw: redmond I just need another set of eyes on this. I think that it might be because I'm using a :after pseudo class but why would that be a problem? Link to comment
creedon Posted May 25, 2021 Share Posted May 25, 2021 I'm not seeing any arrows. Please post the CSS for your effect. Also where is the code installed? Custom CSS? Page header code injection for the page? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
dearnaomichan Posted May 25, 2021 Author Share Posted May 25, 2021 Hi @creedon ! Thanks for responding. I have uploaded the files in a separate page (thats not linked) so I can use the URL in the CSS: Heres all the CSS for this accordion section on this page (specifically .tab-label::after) : // Loan Programs Section .programs__row input { position: absolute; opacity: 0; z-index: -1; } /* Layout */ .programs__row { display:flex; } .programs__row .programs__col { flex:1; } .programs__row .programs__col:last-child { margin-left: 1em; } /* Accordion styles */ .tabs { overflow: hidden; } .tab { width: 100%; border-bottom: 1px solid white; overflow: hidden; } .tab:first-child{ border-top: 1px solid white; } .tab-label { display: flex; justify-content: space-between; padding: 2.5rem; cursor: pointer; align-items: center; transition: all .35s ease; } /* Icon */ .tab-label::after { content: url(/s/dropdown-arrow.svg); width: 3em; height: 3em; text-align: center; transition: all .35s ease; vertical-align: middle; } .tab-content { background: #0071BE; color: white; max-height: 0; padding: 0 2.5em; transition: all .35s ease; } .tab-close { display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; cursor: pointer; } /* :checked */ input:checked ~ .tab-content { //background: blue; max-height: 200vh; padding: 2em 2.5em; } input:checked ~ .tab-label { //background: white; } input:checked + .tab-label::after { transform: rotate(90deg); } .tab-content .tab-button a{ display: block; } Link to comment
dearnaomichan Posted May 26, 2021 Author Share Posted May 26, 2021 UPDATE: I'm having issues linking ALL my SVG images, not just on this page. I feel like it might be a 7.1 template issue? Since I can't upload and SVG image to an image block or in the CSS File Manager, I must upload it on a separate page and use the link to the image. I've done this several times before in the past but for some reason on this website it isn't working. I've reached out to SqSp Help Email to see if they can shed any light on the issue of a link to a file in the file manager not working. Link to comment
creedon Posted May 26, 2021 Share Posted May 26, 2021 Here is an error I'm seeing when I try to load the svg. It appears that only some files types are allowed to be served via the method you've used. Which seems odd to me as svg is popular and SS uses svg themselves. Why prevent users from uploading/storing/downloading these files anywhere in SS, SS? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Alexander_SQSP Posted June 2, 2021 Share Posted June 2, 2021 Hello @dearnaomichan,Thanks for posting your question! This issue is currently an expected behavior. Due to recent changes, any sites in Trial Mode will not have external access to uploaded files. Once a site is upgraded to a paid plan, file access will work as normal. Feel free to leave a comment if you have any additional questions! Build together: Together, we make up a community of Squarespace professionals. Lean on your fellow community members for support and welcome diverse perspectives. Work in progress: Trust that we are all working for the collective good of Circle members and their clients. Keep it light mode: Balance productivity with joyful creativity and curiosity. Link to comment
KelseyG Posted July 2, 2021 Share Posted July 2, 2021 (edited) I have a paid account and my custom css to svg image files are still not showing outside of the Custom CSS tab Edited July 2, 2021 by KelseyG Link to comment
KelseyG Posted July 2, 2021 Share Posted July 2, 2021 (edited) Ok, so SS does not make this easy so here's the solution: After uploading your .svg file as a link, you will get the dynamic path: /s/image.svg Note that this dynamic version WILL NOT WORK:background-image: url("/s/image.svg"); Paste this after your url: https://exampledomain.com/s/image.svg This will redirect to a very long file path. Copy that new url and use it in your custom CSS as the path: background-image: url("https://static1.squarespace.com/static/60cbad31bb9e2415f759b216/t/60d1116d41b3160fdcad630f/1624314221425/image.svg"); You should be able to use this version as well, but keep in mind if your url changes or is in beta: background-image: url("https://exampledomain.com/s/image.svg"); Really. All of this for a common file type like .svg 🙄 Edited July 2, 2021 by KelseyG polizzi and sarawhite 1 1 Link to comment
dearnaomichan Posted July 4, 2021 Author Share Posted July 4, 2021 A long over due update, all my SVGs started working after we purchased a subscription and were not in the trial period anymore! rdesigns 1 Link to comment
KwameAndCo Posted July 27, 2021 Share Posted July 27, 2021 Has anyone found a way around this because it's, quite frankly, rather ridiculous. I've quite a few sites that we use SVG waves for and are hoping not to do long winded code-injection based ones every time. Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
PhilHoughton Posted November 22, 2021 Share Posted November 22, 2021 (edited) @KwameAndCo Ok I have a working solution to this problem, depending on your situation and skill level. I created a seperate trial site using 7.0 and developer mode. Uploaded the SVG assets to the assets folder. Then went back to my 7.1 site and replaced all the svg links in my css with the new urls from the developer site. You also have to put ?password=?YOURPASSWORD on the end of the link files for them to work since the 7.0 site is also in trial mode. The workaround is pretty quick to implement and worth it for me, because otherwise I can't show the client any progress on the site because all the SVG's would be missing. Edited November 22, 2021 by houghtoncreative KwameAndCo 1 Link to comment
KwameAndCo Posted November 24, 2021 Share Posted November 24, 2021 On 11/22/2021 at 3:45 AM, houghtoncreative said: The workaround is pretty quick to implement and worth it for me, because otherwise I can't show the client any progress on the site because all the SVG's would be missing. Clever... But a bi of a nightmare if you have quite a lot and need to track them all! Especially if they're not all via the Custom CSS menu Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
PhilHoughton Posted November 30, 2021 Share Posted November 30, 2021 On 11/25/2021 at 5:16 AM, KwameAndCo said: Clever... But a bi of a nightmare if you have quite a lot and need to track them all! Especially if they're not all via the Custom CSS menu Yeah that could be harder. Do you use some sort of code editor like Atom? I put all my links in there, and then used a find and replace to automatically fix all the links. Rather than doing them one by one. I'll do the reverse once the site is live. KwameAndCo 1 Link to comment
KwameAndCo Posted December 1, 2021 Share Posted December 1, 2021 12 hours ago, houghtoncreative said: Yeah that could be harder. Do you use some sort of code editor like Atom? I put all my links in there, and then used a find and replace to automatically fix all the links. Rather than doing them one by one. I'll do the reverse once the site is live. Oooh that sounds good. Got a referral link or anything? Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
untitledsite Posted September 17, 2022 Share Posted September 17, 2022 I recently discovered that half of my SVG problems come down to this one fault: In other words, file uploads (for SVGs, among other types) can only be utilised with CSS when the website has been paid for. Which to be honest, is ridiculous. I use SVGs to replace the logo, social icons, accordion icons, add elements to buttons, etc...I think it's pretty standard for web at this point?! Does anyone have a way of getting SVGs to load when a site is in trial mode? 😂 tanyacamp 1 Link to comment
tuanphan Posted September 18, 2022 Share Posted September 18, 2022 Currently I host it from an external server. And after I have upgraded the site, I will upload to SS and change the url afterwards. More specifically, I have a test site in WordPress, I upload files to that website and get svg file url. 😆 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment