Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS gradient disables editing?


Rammy

Question

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
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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!

Edited by Rammy
Link to comment
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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 used
https://www.ghostplugins.com/steps/3og8ehny


 

 

Edited by Claire_auck
Added a link
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...