SNG
-
Posts
2 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by SNG
-
-
On 10/26/2020 at 4:06 AM, paul2009 said:
Sure.
At the moment, the summary block metadata is shown in fixed positions as defined by Squarespace. You can change this by using "CSS Flexible Box Layout", better known as "Flexbox". See the example and explanation below.
In the following example, the summary content has been set to "display: flex", which means that the items of metadata (title, price, read more link) all become "flex items" and can be ordered however we want. Next. we set the flex-direction property to 'column' so that the flex items are placed in a column (how they used to be). Finally, we set the "order" property of each flex item (title, price, read more link) to determine their layout within the column. Items are sorted by ascending order value.
/* Change Summary Block Content Order */ /* Enable Flexbox */ .sqs-block-summary-v2 .summary-content { display: flex; flex-direction: column; } /* Summary Block Title Position */ .summary-metadata-container.summary-metadata-container--above-title { order: 1; } /* Summary Block Price Position */ .sqs-block-summary-v2 .summary-price .product-price { order: 3; } /* Summary Block Read More Link Position */ .sqs-block-summary-v2 .summary-read-more-link { order: 4; }
Yes! Again, you just need some CSS that will affect the read more link. For example:
/* Button Styling for read more link */ .sqs-block-summary-v2 .summary-read-more-link { margin-top: 4px; border-width: 2px; border-style: solid; padding: 7px 13px; max-width: 145px; } .sqs-block-summary-v2 .summary-read-more-link:hover { background-color: #171717; color: #fff; }
If this helps you, please click "Like" below ⬇️
I'm trying to do something similar. The button code worked great for me, but the code for forcing the read more link/button without the excerpt isn't working. The read more box is showing without having to check the excerpt box, but after checking it, it's still not showing up for me.
And if possible, I would also like to know how to customize the text in the button to say "shop the look" and to center the button more.
Summary block 'read more' button doesn't show (Lazy Summaries)
in Customize with code
Posted
The page is
https://www.glamgirlbeautyco.com/fashion-find-outfit-of-the-week
I would like "shop this look"/ read more button to show without the excerpt showing. Right now, when I enter the code
}
.sqs-block-summary-v2 .summary-read-more-link {
display: block!important;
}
It allows me to check the "show read more link" without checking the "show excerpt" but when I click it, nothing happens.
Also if possible I would like the button to be centered under the summary image instead of the the left. I currently have this code-
.sqs-block-summary-v2 .summary-read-more-link {
font-size: 0;
}
.sqs-block-summary-v2 .summary-read-more-link::before {
content: "Shop The Look";
font-size: 20px;
}
/* Button Styling for read more link */
.sqs-block-summary-v2 .summary-read-more-link {
margin-top: 6px;
border-width: 5px;
border-style: solid;
padding: 13px 13px;
max-width: 250px;
background-color: #fff;
color: #fff;
}
.sqs-block-summary-v2 .summary-read-more-link:hover {
background-color: #171717;
color: #fff;
}
.sqs-block-summary-v2 .summary-read-more-link {
display: block!important;
}