dvgdvgdvg

On 12/8/2022 at 11:41 AM, Illusterre said:

Hi! thank you so much for your effort! unfortunately I did not see any difference yet.

Try updating the formatting of your "grid-area" settings as follows:

    grid-area: ~"1/2/12/26";

So the full code would be:

@media screen (min-width:768px) and (max-width:999px) {
  .fe-block-ac891789c5e3492edea1 {
    grid-area: ~"1/2/12/26";
  } 
  .fe-block-yui_3_17_2_1_1668550060589_15027 {
      grid-area: ~"13/2/18/26";
  }
}

Let us know if that works!

5 hours ago, tuanphan said:

Is there anyway to change MM/DD/YY to YY/MM/DD? Thank you!

Just change this part in the code:

var dateformat = "mm-dd-yyyy";

To this:

var dateformat = "yy-mm-dd";

1 hour ago, jenniferboddam said:

@dvgdvgdvg The code worked for me too but is no longer aligned with the rest, I have it text aligned to the right, is there a way to add alight right?

https://flugelhorn-seahorse-lzrb.squarespace.com/?p?p&p?p%3Fp=null&p%3Fp=null&p%3Fp=null

pw: design

- would you also know why the summary block doesn't have arrows anywhere? i cant find a way to get them to show

To make your "View More" links right-aligned and add the arrow back in, try the CSS below instead:

a.summary-read-more-link {
  visibility: hidden;
}
a.summary-read-more-link:after {
  content: "View More →";
  visibility: visible;
}

Hope that helps!

32 minutes ago, jenniferboddam said:

@dvgdvgdvg The code worked for me too but is no longer aligned with the rest, I have it text aligned to the right, is there a way to add alight right?

Please share your site URL (and password if applicable)

8 minutes ago, dorthemoller said:

@dvgdvgdvg - your code works for me, but the the link is no longer centred. Do you know how to change that?

Please share your site URL (and password if applicable) and we can take a look.

9 minutes ago, breathedotdesign said:

Hi dvgdvgdvg - sorry, a bit off-topic but please would you be willing to share:

a) How you got a title to show at the top of your blog summary

page

EDIT: I've worked out how to do this - simply adding a 'section'. I'm not sure how I missed that!

b) How you got the column to appear on the right-hand-side

I'm exploring the possibility of using the Blog function for a training resources library and both those functions would be really helpful

Many thanks, John

Glad you figured out the title. 🙂  The page being discussed in this forum post is not made with summary blocks though — it's a collection page, and the difference is key. On a page using summary blocks, you can build a sidebar like you would any other content: just group whatever blocks you'd like in their own column. But collection pages are more restrictive. To achieve the sidebar on my collection page (and on the blog post pages within the collection), I used this plugin from SQSP Themes. Good luck!

On 4/10/2021 at 3:55 AM, tuanphan said:

Hi. Which elements do you have problem?

All instances of Squarespace-provided fonts, which on my site includes all default H4 text and CTAs/buttons (font = Brandon Grotesque) as well as all body text (font = Artigo). They are defaulting to what looks like Times New Roman or similar. Screengrab of an example attached. The only font displaying correctly in Internet Explorer, according to Safari's Responsive Design Mode preview, is the custom one I've uploaded and added to my CSS with @font-face ("BrandonTextWeb-Bold") for my H1/H2/H3.

6 hours ago, tuanphan said:

Hi. Have you solved this yet?

I actually just finally found the cause! It was the pagination links that were breaking the layout. I changed the "grid-column-end" setting on the pagination (from 4 to 3) and now it works perfectly. Here's the CSS in case it's helpful for anyone else:

@media screen and (min-width:768px) and (max-width: 1024px) {
  .blog-basic-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 40px !important;
  }
  .blog-basic-grid .blog-list-pagination {
    grid-column-end: 3 !important;
  }
}

Site URL: https://cyan-teal-3zmw.squarespace.com/blog

I'm working on making my basic grid blog switch from 3 columns to 2 columns at medium screen widths so the columns aren't absurdly narrow. I've applied the CSS that's been shared frequently in this forum, but the weirdest thing is happening — it totally breaks the layout, but ONLY on the main blog landing page. It works just fine if you navigate to a filtered view by category or tag, (e.g. https://cyan-teal-3zmw.squarespace.com/blog/category/In+The+News). Any help would be hugely appreciated! Here's the CSS I'm using for the column switch:

@media screen and (min-width:768px) and (max-width: 1024px) {
  .blog-basic-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 40px !important;
  }
}

Site password: governance

1 hour ago, bangank36 said:

updated correct code

Works perfectly now! Thanks so much!

On 11/19/2020 at 2:20 AM, tuanphan said:

Adonis is custom font or Squarespace font?

@tuanphan Just found this thread and I’m having a similar issue: none of my Squarespace fonts are displaying on Internet Explorer, only my custom fonts. Do you have a fix??

Site URL: https://cyan-teal-3zmw.squarespace.com/

Password: governance

12 hours ago, bangank36 said:

Update the placement using css

.blog-basic-grid--text {
    display: flex;
    flex-wrap: wrap;
}
.blog-basic-grid--text .blog-more-link {
  width: 100%;
}
.blog-basic-grid--text .blog-meta-section {
  order: 9;
}

Update the dateformat using custom code

Please add this snippet into Settings->Advanced->Code Injection to format the date the way you like it

<!-- Fix inconsistent blog date format on Squarespace 7.1 template -->
<!-- Squarespace Forum 03-08-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      var dateformat = "mm-dd-yyyy";
      var pubdate = document.querySelectorAll("time[datetime], time[pubdate], time.blog-meta-item--date");
      for (var i = 0; i < pubdate.length; i++) {
          var d = new Date(pubdate[i].getAttribute("datetime") || pubdate[i].innerText);
          if ( pubdate[i].classList.contains('blog-meta-item--date') ) {
              d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]).getAttribute("content"));
          }
          pubdate[i].innerHTML = d.format(dateformat); 
      }
  });


</script>

 

The variable dateformat currently set with "mm-dd-yyyy", but you can change to different format (reference here)

These are some more format that supported:

"mm-dd-yyyy" --> 02-25-2021

"dd-mm-yyyy" --> 25-02-2021

"mm/dd/yyyy" --> 02/25/2021

"mmm dd yyyy" --> Feb/25/2021

The CSS to move the metadata to the bottom worked perfectly, thank you so much! 🙏  The script to change the date isn't working though, for some reason.

Site URL: https://cyan-teal-3zmw.squarespace.com/blog-posts

I'm looking to achieve a couple of things on my blog collection page:

1) Move the metadata to below the other post content. (This is easily doable on summary pages via the "Design" panel but doesn't appear to be an option on collection pages.)

2) Change the date format from MM/DD/YY to Mon Day, Year.

Any help would be hugely appreciated!

Site password: governance

8 minutes ago, alexandriam said:

That was it! Thank you!! So many ids to sort through. 🙂

Woohoo! Glad we solved it. Feel free to mark the code that worked as the 'best answer' so your question is listed as solved.

Hmmm. Okay one more idea to try:

[data-section-id="5fa5a1a08d0ffc3f2d151b14"] {
  @media screen and (max-width: 767px) {
    .sqs-col-4 {
      float: left!important;
      width: 45%!important;
    }
  }
}

Try this in your custom CSS:

#block-yui_3_17_2_1_1604692235424_57878 {
  @media screen and (max-width: 767px) {
  width: 45%;
  float: left;
  }
}

In case this helps anyone, here's how you can do this in a blog summary block on 7.1:

a.summary-read-more-link {
  visibility: hidden;
}
a.summary-read-more-link:before {
  content: "New Link Text →";
  visibility: visible;
}

The bottom of the Tag Cloud settings pop-up has a slider that allows you to display up to 100 tags or categories – screengrab attached. I imagine their thinking is that no one is going to sit there and read through hundreds of tags in an unfiltered list to find a topic (that's what search is for, right?). If you need to avoid plug-ins as you said, I'd recommend ordering your tag cloud to have the most frequently used up top, and integrating a search bar to bridge the gap. Maybe someone out there can suggest a coding solution to override the 100-item limit though? Good luck!