Jump to content

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

Recommended Posts

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?

 

Screen Shot 2020-08-20 at 2.24.28 PM.png

Link to comment
  • Replies 15
  • Views 990
  • Created
  • Last Reply

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

Link to comment

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.

Link to comment

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

Link to comment

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>

 

Link to comment
  • 3 weeks later...

@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!

 

Link to comment

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


 
Link to comment

@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

Link to comment

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;

}

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.