charlineca

Hi, my site is https://bear-deer-bmsm.squarespace.com/home, password is Squarespace.

I'm using the popup plugin by @WillMyers as I would love to achieve a page transition effect for it to look like the pages are "layering" over the homepage, and I didn't quite know how else to achieve it. I have 2 questions:

- Can I change the z-index of the navigation so that my navigation always displays ON TOP of the popup, not below?

- I would like to make the /about popup full width while they others stay at 50% width. Is there a way to target one specific popup when using several, without changing the others?

Can anyone help with this? Thank you! 

Hi, I am looking to add a loading page to my site - I have found different free coded plugins that can achieve that, however, none of them have an option to show the loading percentage. I would like to achieve something similar to the attached photo (the website is https://cc-balky.webflow.io/) - a static image with a loading bar below. My website is https://roadrunner-indigo-ka3f.squarespace.com/, the password is Squarespace24. Can anyone help with this? Thank you!

Hi, I have an "archive" page on one of my websites, which has a password to get in. But the logo on the page is not clickable - on my regular pages, the logo opens a menu (custom Will Myers mega menu plugin), which I would also like to have that way for my password page.. so that people can get back to the site after viewing the page. Is there any way to achieve this? My page is https://shorturl.at/ABUXY (shortened URL), password is zuerich.

Hi @thuanplan, I tried to use your code and it works, but my "box" where the images are in is still full size (leaving huge spacing at the bottom), and the arrows are not centered in the middle of the image anymore. Any way to fix this?

Hi, my site is https://sailfish-blueberry-aft3.squarespace.com/, password is squarespace. I have a "back to top" link in my footer, I am looking to turn it into a link that actually scrolls to the top. Can anyone tell me how I can do this? Thanks!

35 minutes ago, tuanphan said:

Something like this example?

https://tuanphan.squarespace.com/autoplay-video-popup?noredirect

pass: abc

Kind of like this, yes, but it should not show up as a popup after a few seconds but immediately before the homepage loads. In your example the homepage content seems to load first and then the video opens, but the idea is similar.

Hi, I am looking to move my body text on my password page BELOW the "password" field, and change the "password" field font to my custom font. I have managed to do so with the page body font, but am struggling with the field input. Can anyone help with this?

Site is: https://shorturl.at/pyETY (link shortened)

I am creating an Archive containing 2 portfolios, and one summary / landing page which people go through to get access to the archive - that's the page that has the password wall and from there, people decide where they would like to go in the archive. The problem is that each time they change pages within the archive, they have to put in the password again. Is there any way for their browser to "memorise" the password across the pw protected pages?

I have tried adding ?password="password" to the end of my domain, but it won't work, and would also be inconvenient to have to add that to each project URL. 

Site is: https://shorturl.at/pyETY (link shortened)

Site password: zuerich
Archive password: zuerich24

4 hours ago, tuanphan said:

Squarespace

password is incorrect. Can you check it again?

Try squarespace with a small letter s

I am looking to do a video "overlay" over my homepage, so that if you click on the homepage, you see the video play first, and then you click on the "close" button to get to the website homepage. Does anyone know of a plugin or can help with this? Ideally, I don't want to make this a page with a close button link to the homepage for SEO reasons, so I would really prefer it as an overlay. Basically the same as here: https://laponche.com/

Thank you!

My page is https://sailfish-blueberry-aft3.squarespace.com/, pw is Squarespace

1 hour ago, AlexSan said:

@charlineca, I believe the right solution would be to not use a grid. I don't think this is something that can be fixed with css.

Thank you but my clients have specifically requested this grid, so I will keep trying to find a solution for this.. I'm sure there must be a way to trigger a 2500px resolution for the collection images (instead of the 1500px now)?

Has this been figured out at all? It's a big issue..

On 12/21/2023 at 4:25 PM, paul2009 said:

@charlineca The issue is that the custom CSS is reducing the number of columns and so increase the width of individual images in the list.

For example, at a viewport of 1875px, Squarespace loads images at 1500px wide, which is more than enough for images in two columns. However, if there is only one column, it exceeds the width of the 1500px image (it is stretched to 1875px) and so doesn't look sharp.

When you click into the project it will look fine because Squarespace is expecting the wider viewport and will load the 2500px version at that width.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi @paul2009 is there any way to solve this?

56 minutes ago, paul2009 said:

@charlineca The issue is that the custom CSS is reducing the number of columns and so increase the width of individual images in the list.

For example, at a viewport of 1875px, Squarespace loads images at 1500px wide, which is more than enough for images in two columns. However, if there is only one column, it exceeds the width of the 1500px image (it is stretched to 1875px) and so doesn't look sharp.

When you click into the project it will look fine because Squarespace is expecting the wider viewport and will load the 2500px version at that width.

Did this help? Please give feedback by clicking an icon below  ⬇️

Understood, that makes sense. Is there any way to adjust the width of the images so they don't stretch but are simple shown as a larger image?

1 hour ago, AlexSan said:

Hello ! @charlineca

I see what you mean. There could be a variety of reasons for this. The image dimensions could be too small, and the grid box could be too big (either in height or width), so it is stretching the image and giving it that blurry look. Squarespace recommends the width of your images to be between 1500 and 2500 pixels. Also make sure you're processing your images from hi res to web quality correctly.

The images are all high res, all a minimum of 3000px wide.. So that's not the issue. I also tried changing between png and jpg, it's all the same. 

18 minutes ago, Ziggy said:

The photos look fine to me:

If you look at it on a large device, take this second photo and look at the sofa in the background, it's not as crisp and clear as on the actual project page. There is a difference in quality of the image.

Hi, my site is https://shorturl.at/vALW7 - my pw is zuerich.

On my porfolio project summary pages, my cover photos for some reason appear blurry.

I have added the following code to force one column only, and because I am forcing only one grid column, the photos appear blurry. They are fine when there's a second column, and they are also fine in full width inside the project (where the same file is being used in the same full screen size, and it's fine).

.portfolio-grid-overlay {
  grid-template-columns: 1fr;
}

I have tried png and jpg files, I have tried resizing the photo, nothing seems to work.. They only appear blurry on this summary page, not on the actual project page which is strange..

Can anyone help with this?

24 minutes ago, Ziggy said:

This Custom CSS would add a vertical line:

.header-title {
    border-right: 1px solid white;
}

But to get the line to span the entire height, you'll also want to add this:

.header .header-announcement-bar-wrapper {
  padding-top: 0vw;
  padding-bottom: 0vw;
}
.header-title {
  padding-top: 1vw;
  padding-bottom: 1vw;
  padding-right:2vw;
}
.tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
    padding-top: 0vw;
    padding-bottom: 0vw;
}

Let me know if that works.

Thanks so much, Ziggy!

Hi, I am looking for a code that vertically separates the site title and the navigation by placing a 1px vertical line (|) next to the site logo (similar to the screenshot). Can anyone help with this? It should be responsive across different browser sizes, spanning the whole height of the header, so unfortunatly it's not enough to put a 

.header-title-text::after { content: " | ";  } 

in. 

My site is https://tetra-accordion-k45t.squarespace.com/, password is squarespace.

20 minutes ago, creedon said:

There probably is.

I won't intentionally provide code to override accessibility features for people who use assistive technologies.

Oh, so Squarespace does this for accessibility reasons? I didn't know that, I thought it was just a bug.

8 hours ago, creedon said:

This is a browser accessibility feature and it is recommended not to override what the browser is doing.

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .sqs-popup-overlay * {
  
  	font-family : sans-serif !important;
	
    }
	
  .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-style-text .sqs-popup-overlay-close:before {
  
    content : 'Enter' !important;
    
    }
    
  </style>

Let us know how it goes.

That worked, thank you! I still have this black "frame" around it by default (same on mobile). Do you know if there's a way to remove it? It disappears when I click anywhere on the popup, but it's not very aesthetically pleasing..

I have a newsletter popup on my page https://cotehospitality.squarespace.com/new-page.

I would like to replace the "Close" text with a custom text ("Enter") and replace the font with my custom font. I couldn't find an option to change this in the settings. Can anyone help with this?

Also, I always get a thick "border" on my close signs on popups when a page refreshes / finishes loading - it goes when I click somewhere on the popup.

5 minutes ago, tuanphan said:

Hi,

You mean click Menu item >> Open overlay menu, with menu content pull from this below page?

https://magnolia-flamingo-p4lk.squarespace.com/menu

Yes!

On 9/17/2023 at 6:53 PM, Lesum said:

@posterchild You can add this code snippet within the Custom CSS panel: 

.sqs-gallery-design-stacked-slide {
    border-radius: 10px !important;
    border: 1px solid #000 !important;
}

I replicated the rounded corners and outline to match the text blocks of stage designs, festival merchandise, websites, apps, etc. You can make changes in the code to match your design.

Hi, I tried this code on my website and it works for my homepage, but not for the https://thenooksrilanka.squarespace.com/stay page (pw is nook). I tried to add the collection and section components, and it will work for the border, but the corners just won't become round (there's literally a rectangle image inside a rounded border). Any clue what this can be? 

Hi, my page is https://magnolia-flamingo-p4lk.squarespace.com/ and the password is squarespace.

I want to remove the header and footer from my individual portfolio pages but can't find out how to target all individual portfolio pages using css? I don't want to use the collection tags but instead want to write a code that automatically targets portfolio pages. Can anyone help with this? Thank you!