Ems-H Posted June 8, 2023 Share Posted June 8, 2023 Hi! I have managed to customise the blog meta item categories and sections so my category links appear like the below. I am really happy with them, but I now wish for them to be different colours. E.g. Technology - green background Events - orange background etc. This is the code I used for the blog page .blog-meta-section * { background: #f18800; padding: 0.15em 0.1em 0.15em 0.15em !important; color: #FFF!important; letter-spacing: 0.8px; text-transform: uppercase!important; font-weight: 600!important; font-size: 1rem !important; } IF any one can help that would be amazing! thanks! Link to comment
Ziggy Posted June 8, 2023 Share Posted June 8, 2023 Try the solution in this thread: Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ems-H Posted June 9, 2023 Author Share Posted June 9, 2023 Yes I did thanks, it only changed the link in the navigation menu! I've got no clue how to do it to the blog meta section and by editing with the style I already have in place Link to comment
Ziggy Posted June 9, 2023 Share Posted June 9, 2023 Can you share your website URL? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ems-H Posted June 14, 2023 Author Share Posted June 14, 2023 https://burgundy-sepia-c5lz.squarespace.com/config/pages Are you able to help please? Link to comment
Ziggy Posted June 14, 2023 Share Posted June 14, 2023 What's the password? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ems-H Posted June 22, 2023 Author Share Posted June 22, 2023 Can I share my password privately to you? Link to comment
Ems-H Posted June 22, 2023 Author Share Posted June 22, 2023 I've just emailed it to zygmunt@squarefortytwo.com thanks! Link to comment
tuanphan Posted June 23, 2023 Share Posted June 23, 2023 Do you still need help? 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
Ems-H Posted June 25, 2023 Author Share Posted June 25, 2023 Yes please Password : Sapture1234 Link to comment
tuanphan Posted June 26, 2023 Share Posted June 26, 2023 Something like this? https://burgundy-sepia-c5lz.squarespace.com/all-topics Ems-H 1 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
Ems-H Posted June 27, 2023 Author Share Posted June 27, 2023 (edited) Wow exactly! Yes please! I have the category labels on the blog pages and in the summary block. Exactly like your screenshot is what I need to do. Current css has been customised in the summary-metadata, blog-meta-item--categories, blog-meta-section. See below: .summary-metadata *{ font-family: itc-avant-garde-gothic-pro; font-size: .9rem !important; font-weight: 600; text-transform: uppercase; background-color: #ff8800; color: white; letter-spacing: 0.8px; padding: 0.1em 0.5em; margin-right: 0.1em; display: inline-block; } .blog-meta-item--categories a { background: #f18800; padding: 0.15em 0.5em 0.2em !important; color: #FFF!important; letter-spacing: 0.8px; text-transform: uppercase!important; font-weight: 600!important; font-size: 1rem !important; .blog-meta-section * { background: #f18800; padding: 0.15em 0.1em 0.15em 0.15em !important; color: #FFF!important; letter-spacing: 0.8px; text-transform: uppercase!important; font-weight: 600!important; font-size: 1rem !important; } Edited June 27, 2023 by Ems-H Link to comment
tuanphan Posted June 27, 2023 Share Posted June 27, 2023 First, remove this CSS code .blog-meta-section * { background: #f18800; padding: 0.15em 0.1em 0.15em 0.15em !important; color: #fff !important; letter-spacing: .8px; text-transform: uppercase !important; font-weight: 600 !important; font-size: 1rem !important; } Next, add this CSS code span.blog-categories-list a { padding: 0.15em 0.1em 0.15em 0.15em !important; color: #fff !important; letter-spacing: .8px; text-transform: uppercase !important; font-weight: 600 !important; font-size: 1rem !important; } /* Technology */ span.blog-categories-list a[href="/all-topics/category/Technology"] { background-color: #f1f; } /* Events */ a.blog-categories[href="/all-topics/category/Events"] { background-color: brown; } /* Women */ a.blog-categories[href="/all-topics/category/Women+in+SAP"] { background-color: #000; } Ems-H 1 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
Ems-H Posted July 1, 2023 Author Share Posted July 1, 2023 Thank you so much! This has worked on the blog pages 🙂 I am so grateful! I am now trying to do this with the summary block on the home page please. This is the code I have entered. But is not applying any change. Can you see what I am missing please? span.summary-metadata a { font-size: .9rem !important; font-weight: 600; !important; text-transform: uppercase; !important; color: #fff; !important; letter-spacing: 0.8px; padding: 0.1em 0.15em; !important; } /* Technology */ .summary-metadata a[href="/all-topics/category/Technology"] { background-color: #f1f; } /* Events */ a.summary-metadata[href="/all-topics/category/Events"] { background-color: brown; } /* Women */ a.summary-metadata[href="/all-topics/category/Women+in+SAP"] { background-color: #000; } Link to comment
Ems-H Posted July 3, 2023 Author Share Posted July 3, 2023 Any chance you can help me with the above please? Also the style has not applied to the actual blog post page itself Link to comment
tuanphan Posted July 3, 2023 Share Posted July 3, 2023 With Summary, First, remove this code .sqs-block-summary-v2 .summary-metadata * { font-family: itc-avant-garde-gothic-pro; font-size: .9rem !important; font-weight: 600; text-transform: uppercase; background-color: #f80; color: #fff; letter-spacing: .8px; padding: 0.1em 0.5em; margin-right: 0.1em; display: inline-block; } Next, use this code span.summary-metadata-item.summary-metadata-item--cats a { padding: 0.15em 0.1em 0.15em 0.15em !important; color: #fff !important; letter-spacing: .8px; text-transform: uppercase !important; font-weight: 600 !important; font-size: 1rem !important; } /* Technology */ span.summary-metadata-item.summary-metadata-item--cats a[href="/all-topics?category=Technology"] { background-color: #f1f; } /* Events */ span.summary-metadata-item.summary-metadata-item--cats a[href="/all-topics?category=Events"] { background-color: brown; } /* Women */ span.summary-metadata-item.summary-metadata-item--cats a[href="/all-topics?category=Women+in+SAP"] { background-color: #000; } Blog itself, you mean this? 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
Ems-H Posted July 4, 2023 Author Share Posted July 4, 2023 (edited) Amazing!! thank you. Yes I mean that - blog itself - same as your screenshot 🙂 Also one final thing, any idea why the text is not vertical centred in the background padding? Edited July 4, 2023 by Ems-H Link to comment
tuanphan Posted July 4, 2023 Share Posted July 4, 2023 5 hours ago, Ems-H said: Amazing!! thank you. Yes I mean that - blog itself - same as your screenshot 🙂 Also one final thing, any idea why the text is not vertical centred in the background padding? Because the font. You can change to another font, it will fix itself. Or we can set some top padding to fix by this code /* All topics */ span.blog-categories-list a { padding-top: 0.4em !important; } /* Homepage */ span.summary-metadata-item.summary-metadata-item--cats a { padding-top: 0.3em !important; } /* blog posts */ a.blog-item-category { padding-top: 0.4em !important; } With color, remove this code .blog-meta-item--categories a { background: #f18800; padding: 0.15em 0.5em 0.2em !important; color: #fff !important; letter-spacing: .8px; text-transform: uppercase !important; font-weight: 600 !important; font-size: 1rem !important; } use this new code .blog-meta-item--categories a { padding: 0.15em 0.5em 0.2em !important; color: #fff !important; letter-spacing: .8px; text-transform: uppercase !important; font-weight: 600 !important; font-size: 1rem !important; } /* Technology */ a.blog-item-category[href="/all-topics/category/Feature"] { background-color: #f1f; } /* Events */ a.blog-item-category[href="/all-topics/category/Events"] { background-color: brown; } /* Women */ a.blog-item-category[href="/all-topics/category/Women+in+SAP"] { background-color: #000; } Ems-H 1 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
Ems-H Posted July 6, 2023 Author Share Posted July 6, 2023 Thank you tuanphan, that works and you have been amazing help! Sorry if I am asking too much, there is still a bit of finessing on this job which I can't work out. are are you able to help? 1. Home page Summary block The category coloured box backgrounds are slightly faded. But only on the summary block. Any idea why please? 2. Individual blog post page Any idea how I can add a bit of vertical padding/spacing in-between the category box and the author and date? Link to comment
tuanphan Posted July 7, 2023 Share Posted July 7, 2023 On 7/6/2023 at 9:14 AM, Ems-H said: Thank you tuanphan, that works and you have been amazing help! Sorry if I am asking too much, there is still a bit of finessing on this job which I can't work out. are are you able to help? 1. Home page Summary block The category coloured box backgrounds are slightly faded. But only on the summary block. Any idea why please? 2. Individual blog post page Any idea how I can add a bit of vertical padding/spacing in-between the category box and the author and date? I don't see images. Can you check again 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
Ems-H Posted July 8, 2023 Author Share Posted July 8, 2023 My apologies, see below with images: 1. Home page Summary block The category coloured box backgrounds are slightly faded. But only on the summary block. Any idea why please? 2. Individual blog post page Any idea how I can add a bit of vertical padding/spacing in-between the category box and the author and date? Link to comment
tuanphan Posted July 9, 2023 Share Posted July 9, 2023 #1. Add to Design > Custom CSS .sqs-block-summary-v2 .summary-metadata-item { opacity: 1 !important; } (default is 0.7) #2. Use this CSS /* space category box - author date */ .blog-meta-item.blog-meta-item--categories { margin-bottom: 20px; } Ems-H 1 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
ArtificialVisions Posted June 25 Share Posted June 25 Hi All, I'd love to be able to achieve this but I'm not sure what I'm doing wrong, here's a screenshot for example: I used this: span.blog-categories-list a { padding: 0.15em 0.1em 0.15em 0.15em !important; color: #fff !important; letter-spacing: .8px; text-transform: uppercase !important; font-weight: 800 !important; font-size: 1rem !important; } /* Ongoing */ span.blog-categories-list a[href="/all-topics/category/Ongoing"] { background-color: #0CC0DF; } /* Completed */ a.blog-categories[href="/all-topics/category/Completed"] { background-color: 0CC0DF; } .sqs-block-summary-v2 .summary-metadata-item { opacity: 1 !important; } Link to comment
tuanphan Posted June 28 Share Posted June 28 On 6/26/2024 at 3:21 AM, ArtificialVisions said: Hi All, I'd love to be able to achieve this but I'm not sure what I'm doing wrong, here's a screenshot for example: I used this: span.blog-categories-list a { padding: 0.15em 0.1em 0.15em 0.15em !important; color: #fff !important; letter-spacing: .8px; text-transform: uppercase !important; font-weight: 800 !important; font-size: 1rem !important; } /* Ongoing */ span.blog-categories-list a[href="/all-topics/category/Ongoing"] { background-color: #0CC0DF; } /* Completed */ a.blog-categories[href="/all-topics/category/Completed"] { background-color: 0CC0DF; } .sqs-block-summary-v2 .summary-metadata-item { opacity: 1 !important; } Can you share link to page? We can check 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment