EmBee Posted February 5, 2015 Share Posted February 5, 2015 (edited) Depending on the template it seems that the summary block will inherit the style of another element rather than normal headings. How can I change it to a different style? Edited August 25, 2016 by llogan wklz and Scoobie 2 Link to comment
Solution EmBee Posted February 5, 2015 Author Solution Share Posted February 5, 2015 (edited) This worked for me, add it to the Custom CSS Editor: .sqs-block-summary-v2 { .summary-title, .summary-heading { font-family: "whatever font"; font-size:15px } } You can add other font elements in there of course. Also found this code to made the “Extra large” text setting even larger – you can change the 20px to whichever size you need: .sqs-block-summary-v2 .summary-block-setting-text-size-extralarge .summary-excerpt p { font-size: 20px; } Edited February 5, 2015 by EmBee Link to comment
neeklamy Posted March 24, 2015 Share Posted March 24, 2015 @EmBee – I’ve joined your two answers together. For the first block of CSS, I’ve made a slight change too – using the Less syntax makes for less repetitive CSS, this uses simple nested rules. And I’ve formatted the code. To format code, just highlight the lines of code and use the 5th button in the toolbar: The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
so-in Posted April 23, 2015 Share Posted April 23, 2015 sorry where I do find the combined answer css code Link to comment
neeklamy Posted April 23, 2015 Share Posted April 23, 2015 @SOIN – EmBee has two blocks of CSS, I just combined the separate answers together. If you want to make use of both, just paste both lots into the CSS Editor. The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
ptrva Posted January 16, 2018 Share Posted January 16, 2018 Thanks for this code, worked on Rally with .summary-title-link { font-size: 17px; } Link to comment
hillosopher Posted July 31, 2018 Share Posted July 31, 2018 And if you're looking to change the color, you can do this: .summary-title, .summary-heading { color: #ffffff !important } You can use a hex color tool to replace #ffffff with any color you want, like this tool here:https://www.hexcolortool.com/ Link to comment
AskQuesty Posted June 5, 2019 Share Posted June 5, 2019 Hi @EmBee , I made a video tutorial for you on how to Change Font Style of Block Heading. Hope this helps! https://www.askquesty.com/squarespace-answers/change-font-style-of-block-heading-squarespace-tutorial Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses. Link to comment
Nondys Posted June 13, 2020 Share Posted June 13, 2020 (edited) What about if you need to change the text size on mobile?? Edited June 13, 2020 by Nondys Link to comment
tuanphan Posted June 13, 2020 Share Posted June 13, 2020 17 minutes ago, Nondys said: What about if you need to change the text size on mobile?? /* 767 with SS7.1, 640 with SS 7.0 */ @media screen and (max-width:640px) { .sqs-block-summary-v2 { .summary-title, .summary-heading { font-family: "whatever font"; font-size:15px } } } 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
Nondys Posted June 13, 2020 Share Posted June 13, 2020 @tuanphan Thank you so much! It's only changing the heading title. What about the body? I attached a photo for your reference 🙂 Link to comment
tuanphan Posted June 13, 2020 Share Posted June 13, 2020 3 minutes ago, Nondys said: @tuanphan Thank you so much! It's only changing the heading title. What about the body? I attached a photo for your reference 🙂 \ Can you share link to page in screenshot? 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
Nondys Posted June 13, 2020 Share Posted June 13, 2020 @tuanphan Sure! It's https://www.littlemisskonacoffee.org/ Link to comment
tuanphan Posted June 14, 2020 Share Posted June 14, 2020 10 hours ago, Nondys said: @tuanphan Sure! It's https://www.littlemisskonacoffee.org/ Which page? 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
Nondys Posted June 14, 2020 Share Posted June 14, 2020 @tuanphan https://www.littlemisskonacoffee.org/ I added a private password because it's not ready yet. The password is coffee. Thank you so much! Link to comment
RyanDejaegher Posted June 14, 2020 Share Posted June 14, 2020 @Nondys you might need to add !important to the CSS Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Nondys Posted June 14, 2020 Share Posted June 14, 2020 @ryandejaegher Thank you so much that worked! I am definitely not a coder, so I look up as much code as I can and I love this forum community you guys are soooo helpful! RyanDejaegher 1 Link to comment
Nondys Posted June 14, 2020 Share Posted June 14, 2020 Here is the code I used to change... 1. Summery Title 2. Summery Heading 3. Summery Excerpt I added a little spacing too 🙂 letter-spacing: 1px; I used the first code to change everything on mobile, and the second for just desktop 🙂 CSS //change summery text on mobile// @media screen and (max-width: 641px) { .sqs-block-summary-v2 { .summary-title, { font-size: 20px !important; font-family: "playfair display"; } .summary-heading { font-family: "proxima nova"; letter-spacing: 1px; font-size:20px } .summary-excerpt { font-family: "proxima nova"; letter-spacing: 1px; font-size:25px } } } //change summery text on desktop// @media screen and (min-width: 641px) { .sqs-block-summary-v2 { .summary-title, { font-size: 30px !important; font-family: "playfair display"; } .summary-heading { font-family: "proxima nova"; letter-spacing: 1px; font-size:25px } .summary-excerpt { font-family: "proxima nova"; letter-spacing: 1px; font-size:25px } } } gallop 1 Link to comment
ashleemundywebsitede Posted December 7, 2020 Share Posted December 7, 2020 On 6/14/2020 at 6:12 PM, Nondys said: Here is the code I used to change... 1. Summery Title 2. Summery Heading 3. Summery Excerpt I added a little spacing too 🙂 letter-spacing: 1px; I used the first code to change everything on mobile, and the second for just desktop 🙂 CSS //change summery text on mobile// @media screen and (max-width: 641px) { .sqs-block-summary-v2 { .summary-title, { font-size: 20px !important; font-family: "playfair display"; } .summary-heading { font-family: "proxima nova"; letter-spacing: 1px; font-size:20px } .summary-excerpt { font-family: "proxima nova"; letter-spacing: 1px; font-size:25px } } } //change summery text on desktop// @media screen and (min-width: 641px) { .sqs-block-summary-v2 { .summary-title, { font-size: 30px !important; font-family: "playfair display"; } .summary-heading { font-family: "proxima nova"; letter-spacing: 1px; font-size:25px } .summary-excerpt { font-family: "proxima nova"; letter-spacing: 1px; font-size:25px } } } Hey! This worked beautifully for the title but the subtitle/description still didnt change for me. I'm using this with a grid Summary Block pulling a video gallery onto a page if that helps! Link to comment
tuanphan Posted December 7, 2020 Share Posted December 7, 2020 1 hour ago, ashleemundywebsitede said: Hey! This worked beautifully for the title but the subtitle/description still didnt change for me. I'm using this with a grid Summary Block pulling a video gallery onto a page if that helps! If you share link to page where you used code, we can check 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