jenq Posted October 27, 2021 Share Posted October 27, 2021 (edited) Hoping someone can help because I can't seem to achieve what seems like it should be a very simple thing! I'm trying to create an expertise page for a client to showcase their specialties. I'd like it to look similar to the circle landing page (see attached) without the buttons. I have tried three things but none of them are working: Using the auto template for lists. It's almost perfect...except that you can't format bullet points. Again see attached with the red circle. The text doesn't line up correctly and it looks a bit amateurish to me to leave it this way. Using a poster. Unfortunately due to the amount of text, the alignment goes totally out of wack on different screen sizes (also attached), but I can see from the forum search that this is a common issue Using Markdown - after having to tweak site font styles to get this to work (as you can't seem to change the paragraph size), this seemed promising but laying out three columns has become a challenge, again see attached. Plus I will need two rows of 3 boxes and I'm not sure I will be able to get them to line up correctly. Any ideas or suggestions on how I could make this work would be much appreciated!! TIA Edited October 27, 2021 by jenq grammer Link to comment
Solution paul2009 Posted October 27, 2021 Solution Share Posted October 27, 2021 5 hours ago, jenq said: I'm trying to create an expertise page...to look similar to the circle landing page without the buttons. I'd create the content in a collection - such as a Blog collection - and then use a Summary Block to render the content on the page. In this way, the Summary Block (and the Squarespace LayoutEngine) are taking care of the layout instead of you. For example: If this post has helped you, please click a 'Like' or 'Thanks' icon below ⬇️ jenq 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
jenq Posted October 28, 2021 Author Share Posted October 28, 2021 22 hours ago, paul2009 said: I'd create the content in a collection - such as a Blog collection - and then use a Summary Block to render the content on the page. In this way, the Summary Block (and the Squarespace LayoutEngine) are taking care of the layout instead of you. For example: If this post has helped you, please click a 'Like' or 'Thanks' icon below ⬇️ You are a saviour! Great workaround. I can't for the life of me figure out how your formated the block colours though? The first is the collection page which I thought I could use instead, and the second is a regular page with the summary block as a grid and using the excerpt function to show the text. But I can't seem to change the design on this. Link to comment
paul2009 Posted October 28, 2021 Share Posted October 28, 2021 (edited) On the Summary Block page, I'd use something like this: /* Summary Block Style Changes */ /* Use the Collection ID of the specific page */ #collection-xxxxxxxxxxxxxxx { .content-wrapper { background: #ddd; } .sqs-block-summary-v2 .summary-content { background: #fff; padding: 17px; } .sqs-block-summary-v2 .summary-title { font-size: 1.3em; } } Note that this was on a Squarespace 7.1 site where xxxxxxxxxxxxxxx is the ID of the page containing the Summary Block. To apply this to all pages, remove the first functional line ('#collection...') and last line ('}') . Edited October 28, 2021 by paul2009 tuanphan and jenq 2 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
tuanphan Posted October 31, 2021 Share Posted October 31, 2021 On 10/28/2021 at 2:07 PM, jenq said: You are a saviour! Great workaround. I can't for the life of me figure out how your formated the block colours though? The first is the collection page which I thought I could use instead, and the second is a regular page with the summary block as a grid and using the excerpt function to show the text. But I can't seem to change the design on this. If you share link to this page, we can check & give exact code jenq 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
jenq Posted October 31, 2021 Author Share Posted October 31, 2021 (edited) On 10/28/2021 at 8:21 PM, paul2009 said: On the Summary Block page, I'd use something like this: /* Summary Block Style Changes */ /* Use the Collection ID of the specific page */ #collection-xxxxxxxxxxxxxxx { .content-wrapper { background: #ddd; } .sqs-block-summary-v2 .summary-content { background: #fff; padding: 17px; } .sqs-block-summary-v2 .summary-title { font-size: 1.3em; } } Note that this was on a Squarespace 7.1 site where xxxxxxxxxxxxxxx is the ID of the page containing the Summary Block. To apply this to all pages, remove the first functional line ('#collection...') and last line ('}') . Thanks again! I'm almost there, just one last question. I can't get the font size on the bullet points to match the paragraph text. See attached screenshot along with the code below, can you see where I am going wrong? Also, it seems like the background to my footer is now missing too! //remove underlines from hyperlinks// .sqs-block-html a {background-image:none!important} /* Remove non-background image underline for heading and paragraph links */ h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important} /* Summary Block Style Changes */ /* Use the Collection ID of the specific page */ #collection-615cd0bcd9bfbe1b6ee1c655 { .content-wrapper { background: #fff; } .sqs-block-summary-v2 .summary-content { background: #D1D3D6; padding: 30px; } .sqs-block-summary-v2 .summary-title { font-size: 1.8em; color: #0e3a77 } p { font-size: 1em; } ul {font-size: 1em; } } Edited October 31, 2021 by jenq Link to comment
jenq Posted November 1, 2021 Author Share Posted November 1, 2021 I managed to work the footer issue out. Posting here for anyone that might find this useful. Instead of using the collection id in the code, use the section data id code instead. 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