NinonM

Hello @tuanphan, after seeing the CSS code, do you think it is possible to make it? Thanks a lot for your insight. 

Hello Squarespace Community, 

I would like to add an FAQ section to my all blog posts using Structured Data. What I am looking for is an equivalent to Yoast FAQ Blocks. Any recommendations on how to achieve this? Is there a good plugin out there to do so? 

Thanks a lot for your help!

Ninon

@tuanphan, sure! Here it is : 

/*Fix for Blog Banner Code*/
.wm-banner-style-1:not(.sqs-edit-mode-active),
.wm-banner-style-2:not(.sqs-edit-mode-active){
  .page-section.has-banner .section-border{
    position: relative;
    top: 0;
    width: 100%;
    display: flex;
  }
}

body:not(.sqs-layout-editing) .wm-blog-banner{
  min-height:100vh !important; /*Adjust this value to your liking*/
}

.wm-blog-banner .section-background-overlay {
  opacity: .1 !important;
}

.summary-block-setting-design-autogrid .summary-item-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px 25px;

  .summary-item{
    margin: 0 !important;
    width: auto !important;

 
  }
  .summary-content{
    display:flex;
    padding-top: 17px;
    padding-bottom:8px;
  }

  .summary-title{
    flex-grow: 1;
    font-weight:100;
    text-transform:uppercase;
    transition: opacity .5s ease;
  }
  .summary-metadata-container{
    flex-basis: 18ch;
    flex-shrink:0;
    text-align:right;

    * {
      font-weight:100;
      text-transform:uppercase;
      color:black;
      opacity: 1;
    }
  }

  .summary-thumbnail-outer-container{
    a{
      margin-bottom:0px !important;
    }
    img{
      filter: grayscale(0%);
      transition: filter .5s ease,
        transform 1.5s ease;
      will-change: transform;
    }
  }

  /*Hover Effects*/
  .summary-item:hover {
    img{
      filter: grayscale(0%);
      transform: scale(1.05);
    }
    .summary-title{
      opacity: ;
    }
  }

  /*Mobile Styles*/
  @media(max-width:599px) {
    grid-template-columns: 1fr;
    gap: 51px;

    .summary-thumbnail-outer-container{
      width:100vw;
      left:50%;
      margin-left:-50vw;
    }
  }
}

span.next-label {
    visibility: hidden;
}
span.next-label:after {
    visibility: visible;
    content: "More";
    font-size: 30px;
}

span.prev-label {
    visibility: hidden;
}
span.prev-label:after {
    visibility: visible;
    content: "More";
    font-size: 0px;
}

/* Icons to right */
.header-display-desktop {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.header-actions.header-actions--left {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
.header-actions-action.header-actions-action--social>a:not(:first-child) {
    margin-left: -1.5vw !important;
}

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
   margin: 1.5vw 0 0;
}

.header-search-bar{
  margin: 0 0 0 2.5vw;
}
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){
  .header-search-bar{
    display:none;
    margin: 0 0 0 0vw;
  }
}

/**
* Search Icon in Header Styles
* From Will-Myers.com
**/
//Search Page Styles
.sqs-search-page.sqs-search-page-content::before {
  content: "Search";
  display: inline-block;
  margin-bottom: 34px;
  font-size: ~"calc((3 - 1) * 1.2vh + 1rem)";
}

.search-icon * {
  stroke: white;
  stroke-width: 4px;
}

// Desktop Search Icon
.showOnDesktop {
  display: flex;
  align-items: center;
}

.blog-meta-item--tags {
  display: none;
}
// Mobile Search Icon
[data-folder="root"] .search-icon .icon {
  width: 28px;
  height: 28px;
}

@media (max-width: 767px) {
.search-icon * {
stroke: black;
stroke-width: 4px;
}
}

/* Colour of Hamburger Button */
.burger-inner > div {
  background-color: white !important;
}

/* Plugin Sidebar - Custom Styles */
html .sidebar {
  width: 380px;
}
/* end Plugin Sidebar - Custom Styles */

#block-62d555c0a034e7b691f462a4 {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }
#block-62d5567fe2436e5b6229f4a4 {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }

#block-62d55683fb3dc4f51fa06aee {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }

#block-62d55688c9ab99135c61ac4e {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }

#block-62d5568ef54e5d36bda847e7 {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }
/* Load more button */
.loadMoreButton {
    background-color: black;
    color: white;
   margin-top: 4px;
  border-width: 2px;
  padding: 7px 13px;
  max-width: 145px;
}
.sqs-block-summary-v2 .loadMoreButton:after {
    display: none !important;
}
.list-item-content__button-wrapper {
  display: none;
}

Hi @tuanphan. I double checked and all my summary blocks are already using the Grid Layout 🙂 (I just customized it with some code to look like this). So, it should be good to go with the code for Grid Layout! 

Ideally, I need this for all the summary blocks on my site (there are 10 pages with summary blocks). Is it possible? Thank you so much! 

Hi @tuanphan!  I am also trying to display my blog posts on two rows on mobile. I tried your code on my site (https://www.nimpairings.com/) but it is not working. I installed the Lazy Summaries Plugin from Squarewebsites, maybe it is interfering with this code? Could you help? Thanks a lot for all your valuable help! 

Ninon

Perfect, it works. Thanks a lot @tuanphan!

Hello again, the code snippet works when the custom CSS window is open but the items count reappear every time I reload the page. Any idea on how to fix this? 

Thank you so much!

Thank you so much! 

Site URL: https://www.nimpairings.com

Hello Circle members, 

I just purchased the Squarewebsites Lazy Summaries Plugin and cannot find a way to remove items count from the Load More button. 

The plugin provider website states it is possible to remove the items count by playing with this CSS snippet but I don't understand how (I am not a coder). 

.sqs-block-summary-v2 .loadMoreButton:after {
    content: "("attr(data-items-left)")";/*attr data-items-left refreshing each time you click*/
}

Can anyone help me figure this out? Thanks a lot.

Ninon 

It works! Thank you so very much for your help @creedon! I'm very grateful! 

Hello again, 

I tried using this code on a specific block and I got a text background with 50% opacity but the text itself is also becoming less opaque, which I don't want. What should I add to the code to keep the text fully opaque and bright? 

{

background: #013220;

padding: 10px;

opacity: .5 !important;

text-align: center;

}

Thanks a lot for your input!

Site URL: https://www.nimpairings.com

Hello Squarespace Community,

I use Squarespace 7.1 and I would like to know if there is a way to change the overlay opacity of the new text background feature. So far, I can only add a solid white background but I would like a white background with 50% opacity. Is there a way to achieve this using custom CSS?

Thanks a lot for your help!

Ninon 

Site URL: https://www.nimpairings.com

Hello everyone, 

The preview of my site (Social Sharing Image and Site Description) are not showing when I share the link of my website on WhatsApp. It is not very engaging and I would like to fix this. Can anyone help with the matter?

Thanks a lot!

Thank you very much for your quick reply paul2009. I will use categories for wines too then. I like the way categories and tags are separated by a dot (and not a comma) in summary blocks. I wanted the same presentation on my blog list page. But you are right, not worth the cost of hiring a developer just for that. So sad this feature disappeared on Squarespace 7.1! Thanks again anyway 🙂

Site URL: https://www.nimpairings.com/all-recipes-pairings

Hello Squarespace Community,

I have a food and wine blog and I need to display both tags and categories for each blog post on my blog landing page. Categories on my website are for meal types (starters, main courses etc) and the tags are meant to display the wines (Chardonnay, Merlot etc). Without the Tags appearing, one important information is missing. 

I contacted Squarespace Customer Care who told me that this feature was not built-in yet. Is there any way to display tags using code? 

Thank you so much for your precious hep!