Jump to content

Help to create coloured text boxes or format markdown

Go to solution Solved by paul2009,

Recommended Posts

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:

  1. 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.
  2. 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
  3. 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

Screen Shot 2021-10-27 at 11.32.03 AM.png

Screen Shot 2021-10-27 at 3.37.00 PM.png

Screen Shot 2021-10-27 at 11.15.52 AM.png

Screen Shot 2021-10-27 at 3.45.11 PM.png

Edited by jenq
grammer
Link to comment
  • Solution
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:

1847897326_Screenshot2021-10-27at09_32_30.thumb.png.2e3f1eacf898ad1a0d532a407e25f794.png

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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:

1847897326_Screenshot2021-10-27at09_32_30.thumb.png.2e3f1eacf898ad1a0d532a407e25f794.png

  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. 489364646_ScreenShot2021-10-28at8_02_55PM.thumb.png.a09474dc3737731981678e6152bbd706.png

Screen Shot 2021-10-28 at 8.05.42 PM.png

Link to comment

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 by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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. 489364646_ScreenShot2021-10-28at8_02_55PM.thumb.png.a09474dc3737731981678e6152bbd706.png

Screen Shot 2021-10-28 at 8.05.42 PM.png

If you share link to this page, we can check & give exact code

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
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;
  }
}

Screen Shot 2021-11-01 at 10.33.30 AM.png

Edited by jenq
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.