Jump to content

[Share] Summary Style: Title (left) – Category (right)

Recommended Posts

Posted

To achieve a Summary Block style like this

image.png.446a2beb5a259a5225cddddd62af99f0.png

#1. First, you can add a Summary Block

Use these options

  • Primary Metadata: Category
  • Secondary Metadata: None

image.png.d05ee16f52d7784c1d073463af9a4fd9.png

Click Design > Choose List layout

image.png.a1a60ebe96a96dd73495c06e701ec8c5.png

At Elements, enable Title only

image.png.786ddf7dfe9bf171f0868f5e0d09ee38.png

#2. Next, find ID of Summary Block.

In my example, it is: #block-yui_3_17_2_1_1728035268472_14593

image.png.b37cfb5ebcd1e714b755736f7f563687.png

#3. Next, use this code to Custom CSS box

#block-yui_3_17_2_1_1728035268472_14593 {
  div.summary-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  span.summary-metadata-item a {
      background-color: #ececec;
      padding: 2px 5px;
      border-radius: 5px;
  }
    .summary-title {
      overflow: hidden;
  }
}

image.thumb.png.19a15c25c630ef48e463e6833ccbdc4c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Replies 0
  • Views 364
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.