WillMyers

@cwilk180 Yup! @tuanphan is right, this can be styled through CSS.

hey @tuanphan, thanks for the recommendation. It's not possible invert mine, that would require a different HTML setup, but that's pretty cool and a good idea for a future plugin! @cwilk180, if your end up getting my plugin and have any questions let me know!

@creedon, that would have been my first guess as well. @logang2, are you seeing the font label styles change? It’s possible there’s some weird specificity issue happening so you’d need the !important; tags on each value for it to work.

Hey Logang, try using this bit of CSS to remove the sidebar: body.cart #sidebar-one-wrapper { display:none; } All the other items are a bit more complicated. It doesn't look like they're using a default class naming convention with random classnames. But these bits of CSS might do the trick: /*Borders*/ body.cart .cart-container .qrq0lfTEB{ border-top: 1px solid white; border-bottom: 1px solid white; } /*Label Fonts*/ body.cart .cart-item-list-labels { font-family: 'El Camino' !important; }

Hey Zack, just responded to your email re:Image above the tabs. Should be possible, but you'll need to use a :before pseudo-selector. I'd definitely recommend my Tabs (For Sections) over the Secondary Nav for your other question though. The secondary nav is meant to be more similar to a site navigation rather than a page navigation.

Ahhh, try adding this second media query to adjust things on mobile. @media(min-width:767px) { #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-container{ padding-right:0px !important } #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-outer-container { width: ~'calc(50% - 17px)' !important; margin-right: 17px !important; } #block-yui_3_17_2_1_1617916128409_10322 .summary-content{ width: ~'calc(50% - 17px)' !important; margin-left: 17px !important; } } @media(max-width:767px) { #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-container{ padding-right:0px !important } #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-outer-container{ width:100% !important; padding-right:0px !important; } #block-yui_3_17_2_1_1617916128409_10322 .summary-content{ width: 100% !important; margin-top: 34px !important; } }

Hey Julius, interesting question and I can confirm this is more difficult that it seems. The problem we run into here is with alignment. In a summary block, that spacing is controlled by the padding of the image. But if we adjust that padding, it will misalign this block with the others on the page. You can see what I mean by adding in this bit of Custom CSS .summary-thumbnail-container{ padding-right:40px !important } So what we need to do is remove that padding entirely. Add in margins on the content element and the image element and then resize those elements. This CSS should do it: @media(min-width:767px) { #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-container{ padding-right:0px !important } #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-outer-container { width: ~'calc(50% - 17px)' !important; margin-right: 17px !important; } #block-yui_3_17_2_1_1617916128409_10322 .summary-content{ width: ~'calc(50% - 17px)' !important; margin-left: 17px !important; } } I also wrapped it in media queries so that it only happens on desktop, and I added the block level id in front of each selector so that this code only applies to this one summary block.

So what we want to do is add content before and after the cart quantity count that works with screenreaders, but doesn't show up on the screen. So we'll be using Javascript to inject some code. Squarespace has this CSS Class called "Visually Hidden" which hides text on the screen, but keeps it accessible to Screen-readers, like voiceOver. What we want to do its check out the DOM and add a span before and after the cart quantity count element with the text that we want the voiceOver to speak. That's what my JS below is doing. Be sure to put this in the footer of the website. Let me know if you or anyone else reading this wants a video tutorial on this. Might be helpful for other things in the future. <script> let cartQuantities = document.querySelectorAll('.sqs-cart-quantity'); cartQuantities.forEach(cart => { let preText = document.createElement('span'), postText = document.createElement('span'); preText.classList.add('visually-hidden'); postText.classList.add('visually-hidden'); preText.textContent = "Your cart has:"; postText.textContent = "items"; cart.parentElement.prepend(preText); cart.parentElement.append(postText); }); </script>

Hey! What I'd recommend is a bit of Javacsript to see if a user is on the search page, and if they are, then add a class to the body. Then you can add some Custom CSS that could hide the footer, or style it however you'd like! Place this in your site header code injection area. <script> if (window.location.pathname == "/search") { document.querySelector('body').classList.add('search-page'); } </script> Custom CSS: .search-page #footer-sections{ display:none; } Hope that helps!

Hey deoracatherine, this has to do with the way Squarespace manages and combines blocks into columns & rows. As you add and move blocks, pay close attention to where the "Insertion Point" (the blue line) is as you add in or move content. What I'd suggest is add that first row of three blocks next to each other. Then add in a spacer block under ALL 3 of them. Now add your other two blocks next to each other under the spacer (you can add another spacer block on the right so the blocks remain the same size). This should get all the blocks organized correctly. You can then delete the spacer block between the first and second row. Let me know if that does it!

Hey Larkin, gotta move that overlay with the image. .design-layout-poster img, .design-layout-poster .image-overlay{ transition: 1s } .design-layout-poster:hover img,.design-layout-poster:hover .image-overlay{ transform: rotateY(180deg); transition: 1s } .image-card-wrapper{ transform:rotateY(180deg)!important; opacity:0; transition: 1s; } .design-layout-poster:hover .image-card-wrapper { opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s; } Does that do it?

Hey Jonathan, you'll want to select the specific page first, then the header on that page. CSS should be this: #collection-5b04518e88251b9e5e84a20f .Header--bottom{ background:blue; } Video link here if you're curious how I got it. (Warning, I talk fast) Let me know if that does it for you!

Hey kimimischke, yeah, I'd imagine it's because of the overlay that that's overlapping with the link. I'll need to take a look at your site to see exactly where the issue is though. Your site is showing up as Private, could you set it to Password Protect?

Hey Simkrys, what you're looking for is margin not padding. I've first targeted the specific summary block you're using then the summary items within it. Use this bit of CSS: #block-yui_3_17_2_1_1616980247371_7874 .summary-item { margin:10px; } Hope that helps!

Hey Neet, the CSS property you want to use here is probably margin-top. First target the block-level element then go for the button within in. This Custom CSS should do it: #block-yui_3_17_2_1_1616704237618_71403 .image-button-wrapper{ margin-top:-75px } Let me know if that does it!