Need Help: Summary Blog Tile Posts are transparent and hard to see on a pictured background

Site URL: https://lychee-oval-8srw.squarespace.com/homepage

Need Help: Summary Blog Posts are transparent and hard to see on a pictured background

I'm trying to make a summary row for blog posts on the front page.

It should be on top of a background, but when I place a background image the tiles for each blog post are transparent and are hard to see.

Is there a way where each blog post on the summary shows up on top of a white tile? So it's easy to read. Check image below.

If you look closely, there are two blog posts on the left side but you can't see them well. One is "featured" and the other is "around the block".

Is it possible?

Your site is private. Can you setup password & share url?

lychee-oval-8srw.squarespace.com

it's public so you shouldn't need a password. i got the business account it should have the "premium" blocks (according to the product sheet)

See how this works for you, place in custom CSS, creates white background with drop shadow, gradient red read more button and adjusts padding between blocks. You can see the results by clicking the link to my site,  scroll down a bit to get to the summary blocks on the page. I have not used this code over a section with background image but I see no reason it should not work. 

https://myrandomviews.com/storysummary

// DB Summary Block Design //

.sqs-block-summary-v2 .summary-item {
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
}

// DB Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 20px 40px 20px 40px;
}

// DB Summary Block Button //

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(to right, #F07C63, #E45372);
  color: white;
  border: 0px solid white;
  border-radius: 50px;
  padding: 10px 20px;
}

This additional code changes the hover and opacity and title font link size also goes into custom css:

img.summary-thumbnail-image.loaded:hover {
 opacity: 0.8;
 }

.summary-title-link {
    font-family: proxima-nova, serif;
    font-size: 16px;
}

thanks i'll give it a try, and i'll let you know how it goes.

i'm trying to make a real estate blog for the greater dc area. just a way to keep in touch with stuff i notice and anything that seems interesting. as time passes, stuff could probably apply to a wider audience.

@derricksrandomviews

wow yeah it looks a lot better. do you know how to add space between each tile? i have 3 in a row right now but they are squeezed together. 

i tried to search for the code to change the size of the tiles and/or lock in a certain size to make them uniform but i couldn't' find anything.

I will find it, but someone here may beat me to it! You can also change the summary block layout and see if that helps, change it from wall to grid or vice versa. 

This section of the code I posted to you adjusts the space between content blocks i think. I have not changed the numbers due to the fact it layed out fine with my template, but it will not hurt to try. i would start by adjusting 20px to 17px. 

// DB Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 20px 40px 20px 40px;
}

ok i'll see if it works. i tried the grid setting and it looks really nice but it's taking up the whole page. I wanted to it show maybe 3 or 4 posts and that's it for the front page (summary).

maybe click buttons to move the tiles left or right since they're ordered by release date.

---

also, i'm trying to inject some code on another page. it's code for a mortgage calculator but when i inject it it's covered by the header section. is there a way to put this into it's own block or section? so i can change the background color too

https://aroundtb.squarespace.com/mortgage-calculator

here's the code. i got it from a random website that embeds the calculator

<div class="calconic-calculator"  data-calculatorid="5f494435d38e1a001e61bf7b"></div>
<script>
  (function() { var qs,j,q,s,d=document, gi=d.getElementById,
  ce=d.createElement, gt=d.getElementsByTagName,
  id="calconic_", b="https://cdn.calconic.com/static/js/";
  if(!gi.call(d,id)) { j=ce.call(d,"script"); j.id=id; j.type="text/javascript"; j.async=true;
  j.dataset.calconic=true;
  j.src=b+"calconic.min.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(j,q) }
})();
</script>

You can set the number of posts the summay layout puts up, wall or grid, by using the display slider. 

i tried adjusting the padding but it only adjusted the tile. it didn't seem to change the space between the tiles. i'm using the carousel layout with 3 posts.

(whenever i use grid it overflows and I can't get it to show only 3 at a time)

Well lets put out the call for code to adjust padding between summary block "thumbnails". I feel confident we will get a satisfactory answer. In the meantime take a look at this:

https://sf.digital/squarespace/improving-summary-blocks

@derricksrandomviews

Hi, Sorry to ask, but I wonder if you could help with a similar question. I'm trying to put shadow around the summary block. I used your code above:

.sqs-block-summary-v2 .summary-item {
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
}

but it puts shadow around the individual items within the summary block. For example, my summary block contains events. Each event had a shadow. What can I change for it to be around the summary block itself please?

Thanks!

So you are looking for a shadow border around the block as a whole? Modifying the code a bit may work, if not we made need to target the id of the block:

.sqs-block-summary-v2 {
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
}

@derricksrandomviews Thank you for this. Much appreciated.

Strange things is, this code worked last night with individual IDs. At lunchtime today the shadow disappeared! I deleted and reinserted all CSS to match what was there last night (I had saved a back up of CSS). Any thoughts on what might cause that?

My colleague was trying to format fonts and other pages throughout the day. Nothing related to my summary block shadows though. I reinserted your code above (without individual IDs and it didn't work. It's as if all CSS is turned off.

Thanks

Lets try something simple just a border around your summary block not each item: 

Do you have the chrome block id extension? You can get that here:   https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

To do this, add the following code (again, making sure to change up the #block-yui portion to match your site):

  #block-yui_3_17_2_1_1552742258023_6130 {

  border-style: solid;

  border-color: black;

  border-width: 2px;

}

@derricksrandomviews You helped me fix it. There was a bad piece of code for a font in CSS stopping all other CSS working. Thanks so much.