Jump to content

Ghost Plugin Tweak / Stripey Summary Block

Recommended Posts

Site URL: https://meningitis-foundation.squarespace.com/meningitis-symptoms

Hello.

I ❤️ Ghost Plugins  😉

I'm using one of their summary block plugins and I wondered if someone could help me tweak the code so the height of the containers are fixed. @moovlabs, is this something you can help with?

Here's a link to the plugin;
https://www.ghostplugins.com/steps/5hn28gh9

I have attached a screenshot too,  fingers crossed it's an easy add/fix.

ALSO....is there a way to add the plugin to this specific page only rather than the whole site? Given that I am proofing this with the client at random times, I have removed the CSS as it was effecting 3 other pages visually, so if it's not showing that's why you can't see it.

Cheers
Claire.

 

Screen Shot 2020-04-07 at 1.00.17 PM.png

Link to comment
  • Replies 4
  • Views 801
  • Created
  • Last Reply

Hi @Claire_auck 👋!

You can set the height for all summary items to be the same with this CSS. Adjust to your liking.

.sqs-block-summary-v2 .summary-item {
  height: 200px;
}

And to target just one page, add the code the page's advanced > header code injection. Add the code between <style>(paste code here)</style>.

Here is an example of that.

<style>.sqs-block-summary-v2 .summary-item {
  min-height: 200px;
  border-top: 5px solid black;
  background-color: #ffffff;
  border-radius: 10px 10px;
  }</style>

Hope this helps! 👻

Cody and Team, The Ghost Co.

👻 Ghost Plugins: Over 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for Squarespace

Link to comment
4 hours ago, moovlabs said:

Hi @Claire_auck 👋!

You can set the height for all summary items to be the same with this CSS. Adjust to your liking.


.sqs-block-summary-v2 .summary-item {
  height: 200px;
}

And to target just one page, add the code the page's advanced > header code injection. Add the code between <style>(paste code here)</style>.

Here is an example of that.


<style>.sqs-block-summary-v2 .summary-item {
  min-height: 200px;
  border-top: 5px solid black;
  background-color: #ffffff;
  border-radius: 10px 10px;
  }</style>

Hope this helps! 👻


Thanks so much for the speedy reply and sorry for the delay.

The 'height' CSS works, however it could be problematic when it responds so I am working through this. (FYI, the content i am dealing with on this page is quite hard to get right and I've tried so many ways to make it work but nothing obvious is coming up and I'm going round and round in circles. If you can think of a different solution I'd be super grateful to hear it 😉)

The second code doesn't seem to work but I'm probably misunderstanding your instructions (sorry). Just to re-cap, the original plugin is in design > custom CSS. Then I add the extra code into the specific page header. The plugin is still displayed on all other pages that feature a summary block.

Also, the colour of the stripe at the top is often displaying black (instead of grey) unless i have the custom CSS tab open then you see the correct colour. Unsure what's happening there?

Any help you could offer would be amazing!

Link to comment

Archived

This topic is now archived and is closed to further replies.

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