ashleemundywebsitede

On 6/12/2023 at 11:14 PM, tuanphan said:

Use this CSS

div.header-nav-folder-content {
    max-height: 300px;
    overflow-y: scroll;
}

This didn't seem to work for me so wondering if it's just for 7.1? If so, how can I do this on 7.0? Thanks!

On 8/8/2023 at 11:37 AM, KendraKernVanDam said:

I'm seeing the same issue. I left my work session early yesterday after finding this thread...thinking it would resolve...but it hasn't. 😕 Would really love squarespace to work properly soon!!! Any way to advance this issue with admin??

Hey Kendra and everyone else following this! 

TLDR: There is a solution to this at the bottom of this response- or at least one that worked for me today.

Re: My original issue. I've been dealing with this issue off and on with various client's sites for a couple years now. Have always gotten in touch with Squarespace and they haven't ever been able to help. The most recent issue that I started this thread with resulted in me going back and forth with SS for about 2 weeks. Their final answer was this is an issue with their connection to Adobe fonts, that their engineers were working on it and their solution was to upload each font I was using as a custom font and connect it via CSS. I had no choice but to do that which resulted in hours more of work and SUCH A HEADACHE. Not to mention my client's brand new WEDDING website was all Times New Roman for the first two weeks of her launch. DISASTER. SQUARESPACE, IF YOU'RE LISTENING, THIS IS NOT OKAY. To boot, the rep I was going back and forth with did tell me they have known about this issue for a couple years. ALSO NOT OKAY. 

Okay, solution time. Today this happened to a different site out of nowhere. I hopped on a chat and they said they know about this issue being their connection with Adobe Fonts and recommended trying to go to the site styles and changing anything about one of the font styles in question. Line height, letter spacing, font size, etc (then changing it back). It worked on 7.1. I haven't tried this solution on 7.0. So try that folks!

I should also note that the rep who I spoke with today said this was a fix that had found for now. I don't know if it will work permanently, but it did for me today. The bug is still active. Hope that helps! Sorry for the novel. 😅

17 hours ago, catalienne said:

thank you so much @tuanphan true legend 🙌

Indeed! Thank you too it worked great for me!

Hey there!

How do you change the color of social media icons in the header on a single page in SS 7.0? I have all the other elements for the header but missing this one.

/*TO CHANGE NAVIGATION LINKS COLOR ON ONE PAGE*/

#collection- .Header-nav-item {

  color: black;

}

/*TO CHANGE SITE TITLE COLOR ON ONE PAGE*/

#collection- .Header-branding {

  color: black;

}

/*TO CHANGE SITE TAGINE COLOR ON ONE PAGE*/

#collection- .Header-tagline {

  color: black;

}

Thanks!

On 2/24/2023 at 10:05 PM, tuanphan said:

Have you tried List Section yet?

Is it possible to do the list section cards but without rounded borders?

Hey there!

How can you make the grid gallery titles on the gallery block larger on 7.1? I have the following code for 7.0 but am wondering how to change it for 7.1 or if that's possible. 

Thanks!

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; font-size: 18px; line-height: 23px; padding-top: 5px;}

On 6/14/2023 at 11:43 PM, creedon said:

Add the following CSS.

.homepage .white {

  --navigationLinkColor : white;
  
  }

Let us know how it goes.

This wasn't working for me. I did try adding in !important before the color and swapping the collection # in too but couldn't find a solution. 

Following this! 

I wanted to keep all of my pages dymanic but have the homepage header navy since I have a carousel gallery under it that won't bleed into the header. 

Two questions- is there code I can add to make the carousel block bleed into the header?

If not, I'm using this code to make the homepage header different from the other pages but how can I get the navigation links to be white?

body#collection-6489f88db282b247da455808 header#header, body.homepage header#header {
    background-color: #343b57
 !important;
}
 

Site:https://amwdtest-site.squarespace.com/

PW: amwd

Hey there, I built a site for a client using Squarespace's fonts (no custom uploaded fonts on this one). I can see all the correct fonts in editing mode but the live mode suddenly changed last week all to Times New Roman. It's been live for over a month with the exact design I originally created and published and out of nowhere, it changed.

I've tried everything I can think of. I've removed the (very limited) custom CSS, cleared my cache/broswing data, opened it in an incognito window. I've scrubbed the backend for any additional coding the client might have put in (she didn't but I wanted to double check). There's nothing on the site that should be in any way affecting the live view.

I am stumped. I don't know what to do or how to make the live site reflect the original design. It looks terrible with Times all over the site. 

Can anyone help? See attached for what it should look like and link below for what it does look like.

https://www.abovebeyondweddingdesigns.com/

MY CSS (for context): 

h2 strong {color: #8A7090;}
h3 strong {color: #EEE5E9;}

.sqs-block-html p a, .sqs-block-markdown p a, .sqs-block-image p a, .sqs-block-html blockquote a, .sqs-block-markdown blockquote a, .sqs-block-image blockquote a, .sqs-block-html ol a, .sqs-block-markdown ol a, .sqs-block-image ol a, .sqs-block-html ul a, .sqs-block-markdown ul a, .sqs-block-image ul a, h1 a, h2 a, h3 a {
      border: none !important; }

.Header-nav-item::after {
  content: '';
  background: #63B38F;
  height: 2px;
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1.25s;
  margin: 0 auto;
}
.Header-nav-item:hover::after {
  width: 100%;
}

#block-641332c217fea5308e743996
h1 {font-size:85px;
letter-spacing: -0.04em}

#block-13795af51a2a007bafa7
h1 {
  color: #ECC8A7;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: WHITE;
  text-shadow: 5px 5px 0 #ECC8A7;
}

#block-a3af9b257e7b5afc875c
h1 {
  color: #ECC8A7;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: WHITE;
  text-shadow: 5px 5px 0 #214F4B;
}

#block-b46a4e54c9d46ed174fc
h1 {
  color: #ECC8A7;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: WHITE;
  text-shadow: 5px 5px 0 #ECC8A7;
}

#block-b998fdacd689b09193a4
h1 {
  color: #ECC8A7;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: WHITE;
  text-shadow: 5px 5px 0 #ECC8A7;
}

#block-4eac5be891f3cd027ec1
h1 {
  color: #ECC8A7;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: WHITE;
  text-shadow: 5px 5px 0 #214F4B;
}

.medium-button-shape-pill .sqs-block-button .sqs-block-button-element--medium:hover {
  background-color: #6EB38F;
  transition: 1s;
}

#block-yui_3_17_2_1_1678995208104_6054
h2{font-size:30px;
letter-spacing:-0.04em}

#block-6164b3bfc0179436adca
h1 {
  color: #ECC8A7;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: WHITE;
  text-shadow: 5px 5px 0 #214F4B;
}

#block-762feeb82c5ee2af66b7
h1 {
  color: #ECC8A7;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: WHITE;
  text-shadow: 5px 5px 0 #214F4B;
}

This has also happened to me for a client's site! I'm not even using custom fonts on this site. I can see all the correct fonts in editing mode but the live mode suddenly changed last week all to Times. I removed the (very limited) custom CSS, cleared my cache, opened it in an incognito window. I've scrubbed the backend for any additional coding the client might have put in (she didn't but I wanted to double check).

I am stumped. I don't know what to do or how to make the live site reflect the original design. It looks terrible with Times all over the site.

Can anyone help?

https://www.abovebeyondweddingdesigns.com/

On 2/13/2022 at 7:48 PM, tuanphan said:

change text "border" to "border-left"

Thank you! I needed a multi-color border for my client and that worked perfectly 🙂

For reference, this is what I wrote:

body { border-left:10px solid #1d7e99 }
body { border-right:10px solid #607d51; }
body { border-top:10px solid #a14d28; }
body { border-bottom:10px solid black; }
header { margin:10px 10px 0 10px; }

On 8/18/2021 at 4:13 AM, tuanphan said:

It looks like you fixed this?

I'm also wondering how to do this. So for instance on this page, moving the titles above the grid rather than below each grid image/video: https://www.ashleemundy.com/media

Site URL: http://greenpointsoftball.com/sample-page

Hey there!

I'm trying to rebuild a sports league website and we just need to be able to add in a table or something like it that would have a league schedule and another for the league standings. I have been Googling this for hours and cannot find any helpful results. Does anyone know of any good plugins for tables or work arounds to make it look similar to this? 

Thanks so much!

On 9/12/2020 at 9:30 AM, tuanphan said:

try adding !important;

eg: font-size: 10px !important;

I know how to do the headings in CSS but how do you do paragraphs style in 7.1? p1 / p2 isnt working like h1 / h2 does. Thanks!

On 4/11/2020 at 6:50 PM, tuanphan said:

Some CSS Class/ID for Squarespace 7.1

Announcement Bar

• Announcement bar: .sqs-announcement-bar-dropzone
• Announcement bar text: .sqs-announcement-bar-dropzone p
• Announcement bar link: .sqs-announcement-bar-dropzone a

Header

• Header: header#header
• Sticky Header: header.shrink
• Header (not include sticky header): header#header:not(.shrink)
• Site Title: a#site-title
• Site Title (when overlay menu open): .header--menu-open a#site-title
• Site Title (when overlay menu close) body:not(.header--menu-open) a#site-title
• Navigation: .header-nav
• Navigation Items: .header-nav-item a
• Navigation Dropdown: .header-nav-folder-content
• Navigation Dropdown Items: .header-nav-folder-item a
• Mobile Navigation Items: .header-menu-nav-item a
• Mobile Menu Icon: .header-burger
• Mobile Burger 3 lines: .burger-inner>div
• Mobile Menu X icon: .burger–active
• Header Social Icons: .header-actions .icon
• Cart Icon: header#header span.Cart-inner
• Cart quantity: header#header .icon-cart-quantity

Footer

• Footer: footer#footer-sections
• Footer Social Icons:  footer#footer-sections  .sqs-svg-icon–outer
• Footer Links: footer#footer-sections a

Product List

• Product List: .collection-type-products.view-list
• Product Name: .grid-title
• Product Price: .grid-prices
• Product Image: figure.grid-image
• Product Currency: body.native-currency-code-usd .sqs-money-native:before
• Sold Out Text: .product-mark.sold-out

Product Detail

• Product Detail: .collection-type-products.view-item
• Product Breadcrumb: .ProductItem-nav-breadcrumb
• Product Pagination (Previous/Next): .ProductItem-nav-pagination
• Gallery: figure.ProductItem-gallery
• Thumbnails: .ProductItem-gallery-thumbnails
• Big Image: .ProductItem-gallery-slides
• Product Name: h1.ProductItem-details-title
• Price: .ProductItem-product-price
• Currency: body.native-currency-code-usd .sqs-money-native:before
• Excerpt: .ProductItem-details-excerpt
• Add to Cart Button: .sqs-add-to-cart-button-wrapper
• Add to Cart Text: .sqs-add-to-cart-button-inner
• Variant Dropdown: .variant-option
• Variant Title: .variant-option-title
• Variant Options: .variant-select-wrapper option
• Quantity Text: .quantity-label
• Quantity Input: .product-quantity-input

Cart Page

• Cart Page: body#cart
• Cart Title: .cart-title
• Item: .CartTable-itemLabel-3zzV1
• QTY. .CartTable-itemLabel-3zzV1 span
• Price Name: .CartTable-itemPrice-XgjsO span
• X icon: .item-remove div
• Product Thumbnail: .item-image
• Product Name: .CartTableRow-itemTitle-1MDgZ a
• Quantity input: .CartTableRow-itemQuantity-LwuRx.item-quantity
• Price: .CartTableRow-itemPrice-26eXS.item-price
• Subtotal: .CartTable-subtotal-2nJjm
• Subtotal Price: span.CartTable-subtotalPrice-2JFeD
• Checkout: .CartFooter-checkout-28MW2.checkout
• Checkout Text: .CartFooter-checkout-28MW2.checkout span
• Variant Text: .CartTableRow-variant-1ihcF.variant

Blog List

• Blog List: .collection-type-blog.view-list
• Thumbnails: article.blog-item img
• Date: time.blog-date
• Category: span.blog-categories-list
• Title: h1.blog-title
• Excerpt: .blog-excerpt
• Read more: a.blog-more-link

Blog Posts

• Blog Posts Page: .collection-type-blog.view-item
• Blog Items: .blog-item-entry
• Categories: .blog-meta-item–categories
• Date: time.dt-published.blog-meta-item.blog-meta-item–date
• Author: .blog-meta-item.blog-meta-item–author.p-author.author
• Title: .blog-item-title
• Content: .blog-item-content-wrapper
• Pagination: .item-pagination
• Pagination Arrows: .item-pagination-link .item-pagination-icon
• Pagination Title: h2.item-pagination-title
• Author Box: .blog-item-author-profile-wrapper
• Author Image: a.author-avatar.content-fill
• Author Name: .author-name
• Author Site: a.author-website
• Post Comment: .squarespace-comments
• Post Comment Button: .comment.btn
• Comment Input: .squarespace-comments .new-comment-area
• Preview: span.btn-text.preview-comment.top-level-preview-btn
• Subscribe via email text: span.subscribe.subscribe-control

Event List Page

• Event List Page: .collection-type-events.view-list
• Event Thumbnail: a.eventlist-column-thumbnail.content-fill
• Event Time: .eventlist-datetag
• Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day
• Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month
• Event Title: h1.eventlist-title
• Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item
• Event Description: .eventlist-description

Event Detail Page

• Event Detail Page: .collection-type-events.view-item
• Event Title: h1.eventitem-title
• Event Date: time.event-date
• Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item
• Event Description: .eventitem-column-content
• Event Pagination: section.item-pagination.item-pagination–prev-next
• Previous/Next: .item-pagination-link .item-pagination-prev-next
• Event Pagination Title: h2.item-pagination-title

Portfolio

• title: h3.portfolio-title
• item: .portfolio-grid-basic
• portfolio image: .portfolio-grid-basic .grid-image
• pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination
• pagination text: h2.item-pagination-title
• pre text: .item-pagination-link–prev .item-pagination-prev-next
• next text: .item-pagination-link–next .item-pagination-prev-next

Checked & Wrote by tuanphan

How would I make the header social links into circles rather than the regular icons in 7.1?

Also, is there any way to add a tagline in 7.1? So annoying that they took that option away.

On 10/20/2020 at 11:03 PM, creedon said:

@ashleemundywebsitede

Add the following to Design > Custom CSS.

.sqs-widgets-audio-player .player {

  font-size: 20px;
  
  }

.sqs-widgets-audio-player .title-wrapper .title {

  font-size: 1.2em;
  line-height: 1.1em;
  
  }

Let us know how it goes.

This worked beautifully! 🙂 Thank you!

On 7/4/2020 at 4:19 AM, tuanphan said:

Add to Home > Design > Custom CSS

.quote-block * {
	color: red;
	font-size: 20px;
	font-family: monospace;
	font-weight: bold;
}

 

Would I be able to use this and put the specific quote block ID to edit just a single quote block on a site?

On 7/18/2020 at 6:02 AM, tuanphan said:

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1594977105705_12297 .image-slide-title {
    overflow: visible !important;
    white-space: initial !important;
    line-height: 18px;
}

 

This worked wonderfully! Thank you! Any way to make the subtitle text show up under the title font on a grid gallery? 

12 hours ago, creedon said:

@ashleemundywebsitede

Add the following to Design > Custom CSS.

.sqs-widgets-audio-player .player {

  font-size: 20px;
  
  }

.sqs-widgets-audio-player .title-wrapper .title {

  font-size: 1.2em;
  line-height: 1.1em;
  
  }

Let us know how it goes.

That worked like a charm! Thank you so much!

Quote

 

Is there a way to make the font bigger inside the audio block as well?