Rammy Posted June 9, 2020 Share Posted June 9, 2020 Hello! Has anyone encountered problems with CSS gradients with percentage values disabling the Squarespace page edit buttons? As soon as I add percentage values I can no longer edit the pages – the edit buttons won't show up. Double-clicking the content (which usually enables the editing) won't work either. To replicate the problem, try this in the Custom CSS... .Footer { background-image: linear-gradient(135deg, #ece54c 0%, #46bdcf 75%); } Going back to Pages and reloading the site will stop the edit buttons from appearing. Removing the percentage values like below will solve the issue... .Footer { background-image: linear-gradient(135deg, #ece54c, #46bdcf); } Adding a linear gradient with percentage values to text doesn't seem to cause a problem. p { border: none !important; background-image: linear-gradient(135deg, #ece54c 0%, #46bdcf 75%); } Does anyone have an explanation for this? Is this a bug or did I miss something? Thanks! Link to comment
tuanphan Posted June 9, 2020 Share Posted June 9, 2020 Can you share link to your site? We can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Rammy Posted June 10, 2020 Author Share Posted June 10, 2020 On 6/9/2020 at 2:00 PM, tuanphan said: Can you share link to your site? We can check easier. I have since made changes to the site so I doubt it will help you, but sure! It's this one (password: herz). Using the Rally template (Brine family). I just successfully replicated the bug – create a new site using the Rally template and paste this into the Custom CSS... /** Footer **/ .Footer { background: linear-gradient(-45deg, #ece54c 0%, #46bdcf 75%); } Save and refresh the page. The edit buttons should no longer show up. They will show up when you remove the percentage values from the code. ------ Another thing I'm currently trying to figure out on the beherzt Website (password: herz) is how to use a :hover on a parallax item. See I'm using a clip-path to change the appearance of pages with banners on the site... .Parallax-host-outer .Parallax-host .Parallax-item:not(:first-child) { clip-path: polygon( 0 6vw, 100% 0, 100% calc(~"100% - 6vw"), 0 100% ); -webkit-clip-path: polygon( 0 6vw, 100% 0, 100% calc(~"100% - 6vw"), 0 100% ); } Can I somehow use a :hover effect on this? I want to change the clip-path so that it reverts back to a rectangle. It works nicely on pages that have no banner image and the Footer but I can't make it work with pages with banners. Thanks for your help tuanphan! Link to comment
tuanphan Posted July 18, 2020 Share Posted July 18, 2020 Use this code body:not(.sqs-edit-mode) .Footer { background: linear-gradient(-45deg, #ece54c 0%, #46bdcf 75%); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Claire_auck Posted July 20, 2020 Share Posted July 20, 2020 Hey @Rammy I thought I was going mad yesterday and it took me all day to work this out. The same happening to me after I added the ghost plugin for the Gradient Index Image Background. I would love to use this gradient effect (for index banners) so I'm wondering if you worked out a fix? Cheers. Claire. Here's the code that I usedhttps://www.ghostplugins.com/steps/3og8ehny Link to comment
Claire_auck Posted July 21, 2020 Share Posted July 21, 2020 SOLVED!!!@tuanphan was able to help me with this problem.We added this code (viewable in live mode only) body:not(.sqs-edit-mode) .Index-page--has-image .Index-page-content { background: linear-gradient(-100deg, transparent 20%, #881223 90%, #a81b30 100%); } Amazing help, thanks! Claire. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.