Jump to content

summary block COSTUMIZATION - URGENT HELP

Recommended Posts

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;

}

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.