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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

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
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.