jbassett Posted September 27, 2021 Share Posted September 27, 2021 (edited) 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! Edited October 8, 2021 by jbassett updated link and password Beyondspace 1 Link to comment
jbassett Posted September 28, 2021 Author Share Posted September 28, 2021 In case it helps anyone else. I solved this myself. I realised the title field allows for html tags, so I added this directly into the list item title field: TITLE <p style="font-size: 30px; line-height: 0.4; vertical-align: 5px;">SUBTITLE And it works really well. Beyondspace 1 Link to comment
jbassett Posted October 8, 2021 Author Share Posted October 8, 2021 Not sure if Squarespace have made an update but my proposed solution above no longer works. The html now shows up on the site (see attached). Does anyone have any other suggestions I can try? Link to comment
KwameAndCo Posted October 8, 2021 Share Posted October 8, 2021 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) 🧩 Some links may be affiliate/referral links. Link to comment
jbassett Posted October 8, 2021 Author Share Posted October 8, 2021 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/ Link to comment
jbassett Posted October 9, 2021 Author Share Posted October 9, 2021 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. tuanphan and Kuroko 2 Link to comment
Rangifer Posted September 5 Share Posted September 5 (edited) 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 September 5 by Rangifer add more info Link to comment
tuanphan Posted September 7 Share Posted September 7 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment