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

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 post
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

Posted Images

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)

Link to post

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

Edited by derricksrandomviews
Link to post

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 post

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

 

Screen Shot 2020-08-26 at 1.17.18 PM.png

Link to post

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

Edited by derricksrandomviews
Link to post

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 post

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)

Link to post
  • 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 post

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


 
Edited by derricksrandomviews
Link to post

@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

Edited by Sarah-W
typo
Link to post

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;

}

Edited by derricksrandomviews
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...