Jump to content

Adding subtitle to list section

Recommended Posts

Site URL: https://www.eshertennis.co.uk/tennismembershipnew

password: james

Hi there

I'm using 7.1 and I'd like to add a 'subtitle' to items within the list section - styled the same as the item title but a little bit smaller. I'd like it to appear on every list item on this page (and some other pages) but not on every list section throughout the site.

Please see the attached reference for what I'm trying to achieve. The £260 is the subtitle I mean.

I don't see an option within Squarespace so I'm assuming this requires custom CSS.

Thanks in advance to anyone who can help!

Screenshot 2021-09-27 at 10.38.41.png

Edited by jbassett
updated link and password
Link to comment
  • jbassett changed the title to Adding subtitle to list section

You're missing a closing </p> tag.

<p style="font-size: 30px; line-height: 0.4; vertical-align: 5px;">SUBTITLE</p>

Also, if you're using a List Item, I believe that that particular block may not support HTML so that'd be part of the issue.

You'd be better off making the text bold and using something like:

.list-item-content__title strong { font-size: 30px; line-height: 0.4; vertical-align: 5px; }

In your custom CSS.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Link to comment

Thanks for the reply. I should've said that adding a closing p tag makes no difference (see attached image). It appears fine as you enter the html into the title field (with or without the closing p tag), but when you save the page it reverts to showing the code as text. This was working fine last week.

The CSS you provided didn't appear to change anything at all? What I really want is a smaller subtitle in the same style as the title but slightly smaller and a line below. I can see a few threads with similar requests (see links below) but I'm not experienced enough with code to know how to customise them for my requirements.

https://forum.squarespace.com/topic/171861-adding-a-subtitle-to-a-title-to-thumbnails-in-portfolio-grid

https://forum.squarespace.com/topic/175424-adding-a-second-linesubtitle-to-grid-and-product-detail-pages/

https://forum.squarespace.com/topic/192582-add-subtitle-to-index-item-tiles-in-york-template/

 

Screenshot 2021-10-08 at 18.51.23.png

Screenshot 2021-10-08 at 18.52.12.png

Link to comment
  • 1 year later...

Hi, I'm new to squarespace so learning the ropes and getting more familiar each day!
It's been a while since this was last active but I am having trouble figuring this out and don't understand what "p::first-line" means. Would someone be able to expand a bit more on which custom code to add and where to make this happen? I'm also using version 7.1.

 

Thank you very much!

On 10/9/2021 at 3:21 PM, jbassett said:

I solved this myself! Instead of trying to target the title of the list item, I used p::first-line to change the style of the first line of the detail copy.

 

I tried modifying the following response for my use case but it also didn't work. Added to Page Settings > Advanced > Page Header Code injection the following code:

Quote

<style>
h3.list-item-content__title span {
    display: block;
    font-size: 20px;
}

  </style>

And then adding Title <span>Subtitle</span> in the content > Items> [enter a team member] > title

Edited by Rangifer
add more info
Link to comment
On 9/6/2023 at 3:01 AM, Rangifer said:

Hi, I'm new to squarespace so learning the ropes and getting more familiar each day!
It's been a while since this was last active but I am having trouble figuring this out and don't understand what "p::first-line" means. Would someone be able to expand a bit more on which custom code to add and where to make this happen? I'm also using version 7.1.

 

Thank you very much!

 

I tried modifying the following response for my use case but it also didn't work. Added to Page Settings > Advanced > Page Header Code injection the following code:

And then adding Title <span>Subtitle</span> in the content > Items> [enter a team member] > title

Can you share link to page where you use list? We can check/help easier

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!)

Link to comment
  • 1 year later...

Site URL: http://chameleon-koala-6et9.squarespace.com

Hey all,

First off thanks for all the amazing resources and contributions here. I haven't designed a site in over 10 years and I'm extremely rusty. I've been able to get this far with a bunch of searches on this forum, but I'm stuck at a few obstacles.

I'm creating "Price Cards" using a list section. I'm trying to customize the items (cards) in the following ways: 

  • Add a horizontal line
  • Change different font styles
  • Add Icons in the description

I attached the current live card and an example card of what I'm trying to achieve.

The website is chameleon-koala-6et9.squarespace.com
Password: Test098

list_card.png

list_card_example.png

Link to comment

For anyone wondering, I'm slowly but surely getting to the end result. Still a work in progress. I initially started with markdown blocks and then switched instead to a list section. After taking a look at https://forum.squarespace.com/topic/162767-free-template-pricing-table/ and https://www.sparkplugin.com/blog/squarespace-pricing-table, I decided to reapproach it from scratch using markdown blocks following the instructions.

Still have some changes that need to be made that I'm working through, I'll make sure to post whatever solution worked for me at the end.

I'm not sure if the same could be achieved with a list section instead. Guess there's several different paths to get to the end result. 

Edited by ishfeesh
Link to comment

This is what I've been able to do so far since the last version yesterday. Have it pretty close but still some issues. Line height is off and still need to adjust the fonts. Trying to add padding to the image as well.

Have spent quite some time trying to figure out how to adjust the width of each card. The size and spacing utilizing the list section grid which is at 20x20 2 rows and 5 columns was perfect. Now utilizing markdown blocks instead the grid and size is different.

pricing2.png

Edited by ishfeesh
Link to comment
On 9/13/2024 at 12:19 AM, ishfeesh said:

This is what I've been able to do so far since the last version yesterday. Have it pretty close but still some issues. Line height is off and still need to adjust the fonts. Trying to add padding to the image as well.

Have spent quite some time trying to figure out how to adjust the width of each card. The size and spacing utilizing the list section grid which is at 20x20 2 rows and 5 columns was perfect. Now utilizing markdown blocks instead the grid and size is different.

pricing2.png

You can share link to this page, we can help easier

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!)

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.