summary block COSTUMIZATION - URGENT HELP

Hi Community, I need a big big help.. I am in a bit of a pickle. 

I created a bio page with a Ghost Plugin that worked really amazing! 

However, I realized, that I've been using the summary block for other content on my site, which means that the customization will be added to every summary block I used on the site which is a big No No, because for other content it looks terrible.

• Is there a way to use the Code below on only One summary block? 
• Also, can I fix the height of that code so that the length of the block is the same?

Thank you!!

Code:

// Summary Block Title //

.sqs-block-summary-v2 {

.summary-title,

.summary-heading {

font-family: montserrat;

font-weight: 200;

font-size: 18px !important;

line-height: 23px;

color: #1941a9;

}

}

// Summary Block Excerpt //

.sqs-block-summary-v2 {

.summary-excerpt p {

  font-family: europa;

font-weight: 300;

font-size: 17px !important;

color: #2c2c2c;

} }

//* Summary block hover black and white*//

.summary-item img {

  transition: .5s ease-in-out;

  filter: grayscale(1);

}

.summary-item img:hover {

  filter: none;

}

// Hover Grid Summary Blocks //

.sqs-gallery-design-autogrid .summary-item {

  transition: box-shadow .5s, transform .5s; //change the seconds (one or both values) to make the animation faster or slower

}

.sqs-gallery-design-autogrid .summary-item:hover {

  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1); //you can alter the px values and rgba color to change the shadow style on hover

  transform: translateY(-10px); //you can change the px value to make the slide go higher up (negative number) or further down (positive number) on hover

}

// Leaflet Summary Block Design //

.sqs-block-summary-v2 .summary-item {

  background-color: #f2f5f9;

  border: 1px solid #BCBCBC;

  border-radius: 30px 0px 0px 0px;

  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;

  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;

  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;

}

// Leaflet Summary Block Image Radius //

.sqs-block-summary-v2 .summary-thumbnail {

  border-radius: 30px 0px 0px 0px;

}

// Leaflet Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {

    padding: 10px 10px 10px 10px;

}

// Leaflet Summary Block Button //

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {

  display: inline-block;

  margin-top: 20px;

  background: #4FDBA2;

  color: white;

  border: 0px solid white;

  border-radius: 50px;

  padding: 10px 20px;

}

13 hours ago, MARIAPINEROSMURILLO said:

Hi Community, I need a big big help.. I am in a bit of a pickle. 

I created a bio page with a Ghost Plugin that worked really amazing! 

However, I realized, that I've been using the summary block for other content on my site, which means that the customization will be added to every summary block I used on the site which is a big No No, because for other content it looks terrible.

• Is there a way to use the Code below on only One summary block? 
• Also, can I fix the height of that code so that the length of the block is the same?

Thank you!!

 

Code:

// Summary Block Title //

 

.sqs-block-summary-v2 {

.summary-title,

.summary-heading {

font-family: montserrat;

font-weight: 200;

font-size: 18px !important;

line-height: 23px;

color: #1941a9;

}

}

 

// Summary Block Excerpt //

 

.sqs-block-summary-v2 {

.summary-excerpt p {

  font-family: europa;

font-weight: 300;

font-size: 17px !important;

color: #2c2c2c;

} }

 

 

//* Summary block hover black and white*//

.summary-item img {

 

  transition: .5s ease-in-out;

 

  filter: grayscale(1);

 

}

 

.summary-item img:hover {

 

  filter: none;

 

}

 

// Hover Grid Summary Blocks //

 

.sqs-gallery-design-autogrid .summary-item {

  transition: box-shadow .5s, transform .5s; //change the seconds (one or both values) to make the animation faster or slower

}

 

.sqs-gallery-design-autogrid .summary-item:hover {

  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1); //you can alter the px values and rgba color to change the shadow style on hover

  transform: translateY(-10px); //you can change the px value to make the slide go higher up (negative number) or further down (positive number) on hover

}

 

 

// Leaflet Summary Block Design //

 

.sqs-block-summary-v2 .summary-item {

  background-color: #f2f5f9;

  border: 1px solid #BCBCBC;

  border-radius: 30px 0px 0px 0px;

  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;

  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;

  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;

}

 

// Leaflet Summary Block Image Radius //

 

.sqs-block-summary-v2 .summary-thumbnail {

  border-radius: 30px 0px 0px 0px;

}

 

// Leaflet Summary Content Padding //

 

.sqs-block-summary-v2 .summary-item .summary-content {

    padding: 10px 10px 10px 10px;

}

 

// Leaflet Summary Block Button //

 

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {

  display: inline-block;

  margin-top: 20px;

  background: #4FDBA2;

  color: white;

  border: 0px solid white;

  border-radius: 50px;

  padding: 10px 20px;

}

It could be better if you can share us your site with protected password to take a look (if your site doesn't run go-live)

1. You can set an independent Css style for one block by selecting your style with the ID block, not just with general class. You can find the right block id by using the extension Squarespace ID Finder. Here is how to use it: https://recordit.co/kUIH4uco0b

2. Require your site url for checking