johnpaulstuthridge Posted September 5, 2023 Share Posted September 5, 2023 I want to add a drop cap to the first paragraph (that is styled in P1) for every blog post without manually adding the code block to every page. Other tutorials only share how to manually do it. Any ideas? Hope you can help. Link to comment
Ziggy Posted September 5, 2023 Share Posted September 5, 2023 Add this to advanced -> blog post item code injection on the blog page settings in question: <style> p:first-child:first-letter { float: left; line-height: 120%; width: 1em; font-size: 350%; } </style> 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
johnpaulstuthridge Posted September 7, 2023 Author Share Posted September 7, 2023 (edited) On 9/5/2023 at 10:29 AM, Ziggy said: Add this to advanced -> blog post item code injection on the blog page settings in question: <style> p:first-child:first-letter { float: left; line-height: 120%; width: 1em; font-size: 350%; } </style> The code worked, kind of. The code capitalised a P2 style too, which you can see in the photo. I should've said, I need it to target only P1 style. Edited September 7, 2023 by johnpaulstuthridge Specificity. Link to comment
Ziggy Posted September 7, 2023 Share Posted September 7, 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
johnpaulstuthridge Posted September 7, 2023 Author Share Posted September 7, 2023 https://www.manfortoday.com/journal I've managed to change the size and alignment better, but it still needs to target just the first P1 paragraph, not any other P styles (2,3, miscellaneous) Link to comment
Solution Ziggy Posted September 7, 2023 Solution Share Posted September 7, 2023 P1 has the selector: p.sqsrte-large Try this: <style> p.sqsrte-large:first-child:first-letter { float: left; line-height: 120%; width: 1em; font-size: 350%; } </style> tuanphan and Lesum 2 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
johnpaulstuthridge Posted September 7, 2023 Author Share Posted September 7, 2023 Works great, 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