Jump to content

SNG

Member
  • Posts

    2
  • Joined

  • Last visited

Posts posted by SNG

  1. 17 minutes ago, paul2009 said:

    Please provide more details, including a working link to the page so that the community can take a look. The site doesn't need to be live for you to provide us with a link, but if it is still in trial, you will need to set a public password and tell us what it is.

     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;
    }
     

  2. 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;
    }

    summary-block-example-claire.thumb.png.0fc4da86497e4aceae914fae262b49d6.png

      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. 

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