Jump to content

Make summary block non-clickable

Recommended Posts

Site URL: https://www.cooper-horowitz.com/our-services

Hi, for my website I added custom CSS to make the summary blocks non-clickable, it worked great on this page:

https://www.cooper-horowitz.com/recent-transactions

Here is the CSS I added: 

.sqs-block-summary-v2 .summary-item  {
  pointer-events: none;
}

The Services page is set up the same way in terms of using a summary block to display info in a grid:

https://www.cooper-horowitz.com/our-services

The CSS above isn't working on this page and nothing I've tried has solved it. Please help!

Link to comment
  • Replies 12
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

The code is actually...

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item {
    pointer-events: none
}

The #collection-60524ad9bab3017fc972e91c restricts the effect to the one page. If you want the effect site wide remove #collection-60524ad9bab3017fc972e91c. If you want to restrict to only certain pages then you'd do something like the following.

#collection-12324ad9bab3017fc972exyz .sqs-block-summary-v2 .summary-item, /* other page indentifier comment here */
#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item /* recent transactions */

  {
  
    pointer-events : none;
    
  }

Let us know how it goes.

Edited by creedon

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
Quote

If you want the effect site wide remove #collection-60524ad9bab3017fc972e91c.

I do want it sitewide, this is what I tried in my original comment and it is not working sitewide.

I also tried this code you pasted:

#collection-12324ad9bab3017fc972exyz .sqs-block-summary-v2 .summary-item, /* other page indentifier comment here */
#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item /* recent transactions */

  {
  
    pointer-events : none;
    
  }

Results:

- No change on Services Page, the images were still clickable.

- Recent Transactions page *became* clickable with this update.

Because it made the page clickable I removed it. Not sure if the collection numbers were accurate or I was supposed to replace them?

Regardless, sitewide is what I'm aiming for if you have any advice! The weird thing is when I edit this in Inspect tool on the front end it works but not when I add it to the CSS file. I'm pasting my full CSS file here in case there is something overriding it that I'm not seeing.

/* Services page styling */
#collection-60523bd15e2b4b29bde73c3e {
.summary-item {background: white;
padding: 20px;
border-radius: 4px;
  min-height: 250px;
}
.summary-title {
  color: #000000;
  font-weight: 600;
}
.bright .sqs-block-summary-v2 .summary-excerpt {
  color: #000000;
}
.summary-thumbnail-container {width: 100%;}
.summary-thumbnail-container{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
}
/* type styling sitewide */
h1 {
  margin-top: 0px;
  margin-bottom: 0px;
}
h2{
  margin-top: 0px;
  margin-bottom: 15px;
}
h3 {
  margin-top: 20px;
  margin-bottom: 0px;
}
h4 {
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1.5
}
p {
  margin-top: 0px;
  margin-bottom: 0px;
}
/* Timeline styling */
section[data-section-id="607cc80f4e536602170e39d1"]{
.sqs-layout .sqs-row .sqs-block:last-child {
    padding-bottom: 34px !important;
}
.sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0px !important;
}
}
/* Deals page */
#collection-60524ad9bab3017fc972e91c{
.sqs-gallery-design-carousel .sqs-gallery-container {
  overflow: visible;
}
.page-section {
  overflow-x: hidden;
}
.sqs-block-summary-v2 .summary-item  {
  pointer-events: none;
}
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading {
  font-family: teimer-web;
}
  /*services page*/
  
.sqs-block-summary-v2 .summary-item-list  {
  pointer-events: none;
}
.summary-title {
      font-family: teimer-web;
  }
  /*deals nav -- desktop only*/
.deals_nav {
  text-align: center;
  ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
}
li {
  display: inline;
  padding: 10px 25px;
  background-color: #e0e0db;
  margin: 8px;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 500;
}
}
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1620175624532_6471 {display: none;}
}
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1618270568173_3409 {display: none;}
}
}

 

Link to comment

Add the following to Design > Custom CSS.

body:not( .sqs-edit-mode ) .sqs-block-summary-v2 .summary-item-list {

  pointer-events : none;
  
  }

This is a site-wide effect.

Edited by creedon

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

Ok I really have no idea what I'm doing wrong but I just added what you had and commented out the previous versions and it's clickable. Here is the full file again and I'm leaving it "broken" for now so you can hopefully see what is happening??

 

body:not( .sqs-edit-mode ) .sqs-block-summary-v2 {

  pointer-events : none;
  
  }
/* Services page styling */
#collection-60523bd15e2b4b29bde73c3e {
.summary-item {background: white;
padding: 20px;
border-radius: 4px;
  min-height: 250px;
}
.summary-title {
  color: #000000;
  font-weight: 600;
}
.bright .sqs-block-summary-v2 .summary-excerpt {
  color: #000000;
}
.summary-thumbnail-container {width: 100%;}
.summary-thumbnail-container{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
}
/* type styling sitewide */
h1 {
  margin-top: 0px;
  margin-bottom: 0px;
}
h2{
  margin-top: 0px;
  margin-bottom: 15px;
}
h3 {
  margin-top: 20px;
  margin-bottom: 0px;
}
h4 {
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1.5
}
p {
  margin-top: 0px;
  margin-bottom: 0px;
}
/* Timeline styling */
section[data-section-id="607cc80f4e536602170e39d1"]{
.sqs-layout .sqs-row .sqs-block:last-child {
    padding-bottom: 34px !important;
}
.sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0px !important;
}
}
/* Deals page */
#collection-60524ad9bab3017fc972e91c{
.sqs-gallery-design-carousel .sqs-gallery-container {
  overflow: visible;
}
.page-section {
  overflow-x: hidden;
}
/*.sqs-block-summary-v2 .summary-item  {
  pointer-events: none;
}*/
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading {
  font-family: teimer-web;
}
  /*services page*/
  
/*.sqs-block-summary-v2 .summary-item-list  {
  pointer-events: none;
}*/
.summary-title {
      font-family: teimer-web;
  }
  /*deals nav -- desktop only*/
.deals_nav {
  text-align: center;
  ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
}
li {
  display: inline;
  padding: 10px 25px;
  background-color: #e0e0db;
  margin: 8px;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 500;
}
}
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1620175624532_6471 {display: none;}
}
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1618270568173_3409 {display: none;}
}
}

 

Link to comment
  • 2 weeks later...

Ok this *was* working but then my client noticed that the arrows on the Recent Transaction page were no longer clickable. So I reverted and now I'm back to the original issue again. So sorry for all the confusion, if you have any further suggestions please let me know!

Link to comment

Remove the following rulesets from Design > Custom CSS.

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item {
    pointer-events: none
}

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item-list {
    pointer-events: none
}

Then add the code from my updated July 7th post.

The new code should turn off pointer events for just the list part of the summary block, not the controls.

Let us know how it goes.

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
  • 9 months later...

Hey @creedon

I'm attempting a the same disable the summary click for one page on my site. I can use the code to disable across the whole site successfully, but how do I go about targeting it to our /about page? 

This is the code for the recent transaction example from above. How would I direct this to our /about? Sorry, I'm nearly CSS illiterate. 

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item /* recent transactions */

  {
  
    pointer-events : none;
    
  }

Thanks in advance! 

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.