donsvenson Posted January 24, 2023 Share Posted January 24, 2023 Hi, I'd like to add little banners to the pricing table I've created via a summary-list at on of the places indicated by the pink arrows (for all items). I'm talking about hints like "best for independent learners" or "best for ... " which is common in pricing tables. I haven't found any suitable solution for this so far. page: https://luxlessons.lu/luxembourgish-language-course pw: abc143 Link to comment
Beyondspace Posted January 24, 2023 Share Posted January 24, 2023 1 hour ago, donsvenson said: Hi, I'd like to add little banners to the pricing table I've created via a summary-list at on of the places indicated by the pink arrows (for all items). I'm talking about hints like "best for independent learners" or "best for ... " which is common in pricing tables. I haven't found any suitable solution for this so far. page: https://luxlessons.lu/luxembourgish-language-course pw: abc143 Do you have any sample which you want to achieve? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
donsvenson Posted January 24, 2023 Author Share Posted January 24, 2023 1 hour ago, Beyondspace said: Do you have any sample which you want to achieve? Hi Beyondspace, Can be a simple indication beyond the title (but description itself needs to stay left bound) as seen in the first picture ("perfect for ..." etc.), could be with pill shaped background if possible. And a popular banner as seen in both pictures would also be helpful. Thanks for your help! Link to comment
tuanphan Posted January 27, 2023 Share Posted January 27, 2023 It looks like you figured it out? 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
donsvenson Posted January 27, 2023 Author Share Posted January 27, 2023 8 hours ago, tuanphan said: It looks like you figured it out? Hi tuanphan, For the tagline, yes. I used html in the title of each summary item in combination with some header and footer injection code. However, I'd still really like to know, whether there's a possibility of adding a diagonal "Most Popular" banner to the top right corner (or top middle). Do you have any idea on how to achieve this? Thanks for your help! Link to comment
tuanphan Posted January 28, 2023 Share Posted January 28, 2023 22 hours ago, donsvenson said: Hi tuanphan, For the tagline, yes. I used html in the title of each summary item in combination with some header and footer injection code. However, I'd still really like to know, whether there's a possibility of adding a diagonal "Most Popular" banner to the top right corner (or top middle). Do you have any idea on how to achieve this? Thanks for your help! Add to Design > Custom CSS .user-items-list-item-container[data-section-id="63b2df8905dc045b034e7f31"] li:nth-child(2):before { content: "Most Popular"; background-color: orange; color: white; position: absolute; top: 0; left: 0; width: calc(100% - 10px); padding: 5px; border-top-left-radius: 12px; border-top-right-radius: 12px; text-align: center; } .user-items-list-item-container[data-section-id="63b2df8905dc045b034e7f31"] li:nth-child(2) { position: relative; } 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
donsvenson Posted January 28, 2023 Author Share Posted January 28, 2023 8 hours ago, tuanphan said: Add to Design > Custom CSS .user-items-list-item-container[data-section-id="63b2df8905dc045b034e7f31"] li:nth-child(2):before { content: "Most Popular"; background-color: orange; color: white; position: absolute; top: 0; left: 0; width: calc(100% - 10px); padding: 5px; border-top-left-radius: 12px; border-top-right-radius: 12px; text-align: center; } .user-items-list-item-container[data-section-id="63b2df8905dc045b034e7f31"] li:nth-child(2) { position: relative; } Looks great, but it does not match the width fully. Tried changing it but can't get it to align properly. Link to comment
donsvenson Posted January 28, 2023 Author Share Posted January 28, 2023 1 minute ago, donsvenson said: Looks great, but it does not match the width fully. Tried changing it but can't get it to align properly. - 3% seems to work for 13" and mobile but I guess on larger screen it might not fit all the way, I'll try later. Do you think there's a solution to make it fit for sure on any screen? If it were possible to have it overlaid centred on the top line, it wouldn't need to stretch all the way to both sides. Thanks so much for your help! Link to comment
tuanphan Posted February 2, 2023 Share Posted February 2, 2023 On 1/24/2023 at 2:09 PM, donsvenson said: Hi, I'd like to add little banners to the pricing table I've created via a summary-list at on of the places indicated by the pink arrows (for all items). I'm talking about hints like "best for independent learners" or "best for ... " which is common in pricing tables. I haven't found any suitable solution for this so far. page: https://luxlessons.lu/luxembourgish-language-course pw: abc143 It looks like you removed this section? I don't see it now 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
donsvenson Posted February 3, 2023 Author Share Posted February 3, 2023 On 2/2/2023 at 4:05 AM, tuanphan said: It looks like you removed this section? I don't see it now That's strange, the section should be there. I did not change anything about it. Please check again, it should be working. Thank you so much in advance Link to comment
tuanphan Posted February 8, 2023 Share Posted February 8, 2023 On 2/3/2023 at 11:23 PM, donsvenson said: That's strange, the section should be there. I did not change anything about it. Please check again, it should be working. Thank you so much in advance Hi, See this video https://www.loom.com/share/c65d61d0f9bd4315a04d2d0bd3d378be 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment