MARIAPINEROSMURILLO

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;

}

@tuanphan

Not yet! because I haven't started the website but I will let you know as soon as I do. 

On another note, I would like to built a similar team members page on  squarespace:  ex of website: (if you scroll down you will see the members page)   https://www.memotext.com/about/...ideally it would have the same features, hover over effect where you see the name and you can have a linkedin logo that is clickable. Also when you click on the name a window will pop up with the persons bio. 

Do you think there is a plugin? I am more than happy to pay a developer if you think is possible.. thank you @tuanphan

@tuanphan this is why you are the BEST this is exactly what I was looking for, thank you!!!!!!!!!!!!

Hi Tuan!

Thank you so much for your reply. I want to build like an online directory for people to find products. Ideally the products would be categorize, so for example: Hand-made, organic, decoration etc... I would like to include this categories in a page, so when people click on them the products that have those tags get highlighted. 

Let me know if that makes sense 🙂

Hi Community, 

I wanted to know if someone could guide me a little bit. 

I am looking to create a website that highlights products by choosing a specific tag. Similar to this:

https://not-amazon-to.pory.app/

Also, I would like to know if it's possible to add a plugin that allows people to submit a product? Ideally it would a 3 step process. Person submits the product (With specific guidelines), we review product, we approve product.

are there plugins capable of doing this?😄

Thank you!