Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Help to create coloured text boxes or format markdown


jenq

Question

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

6 answers to this question

Recommended Posts

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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
  • 0

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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.

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