-
Posts
293 -
Joined
-
Last visited
-
Days Won
1
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Square_Ace
-
No problem. I think it's just full-width spacer blocks that show on mobile but you can hide them with this custom CSS @media only screen and (max-width: 640px) { .sqs-layout .sqs-col-12>.sqs-block-spacer { display: none; } } Or to make it specific to that page: @media only screen and (max-width: 640px) { #collection-667ebff41c0e24682280be8a .sqs-layout .sqs-col-12>.sqs-block-spacer { display: none; } }
-
Hi, I'd have to remind myself to be 100% sure but I don't think you can't change the color of an SVG if it's a background image, possibly because the SVG file is not actually in the same document (it references a file hosted on assets.squarespace.com). Using a background image you'd need to replace the background image entirely depending on other CSS such as the theme of the header or the page you're on. You need to use an actual SVG element on the page if you want to dynamically control it's CSS. This is how: Go to your site-wide Code Injection and add this to your header code injection: <script> var logoSvg = '<svg class="logo" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="currentColor"/><text x="50%" y="55%" text-anchor="middle" font-size="30" fill="white" dy=".3em">A</text></svg>'; </script> That's just an example SVG so replace with your own SVG code and make sure there are no gaps or line breaks between tags. Make sure your SVG logo and image logo (the image you upload as your logo in Squarespace) are the same size or at least same aspect ratio. SVG code can be tricky if you don't know what you're doing. Using a tool like https://svgomg.net/ can help. In the footer code injection paste this: <script> document.querySelector('.header-display-desktop .header-title-logo a').innerHTML += logoSvg; document.querySelector('.header-display-mobile .header-title-logo a').innerHTML += logoSvg; </script> In your custom CSS paste this: .header-title-logo a { position: relative; img:not(:only-child) { opacity: 0; visibility: hidden; } svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } Then you should be able to use your custom colors like you had: .header-title-logo a:hover { color: #A2A8FF !important; } Or, if you remove the fill="currentColor" from the SVG, you can just adapt the SVG fill with CSS directly, for example: .header-title-logo a { svg { fill: black; } &:hover svg { fill: pink; } } I hope that helps :)
-
Hi, if this is the only pop-up you have then I think you can use this custom CSS: @media screen and (min-width: 640px) { .yui-popup-container-node { display: none; } } Adjust the min-width value as you wish depending on what your preferred minimum width is. I hope that helps :)
-
Reduce Sold Out Text & Change a Colour Size
Square_Ace replied to Rjafadi's topic in Customize with code
Hi, use this custom CSS: .ProductItem-details .product-variants:not([data-variant-in-stock="true"]) { .c-swatches__button.is-active { background: pink !important; color: white !important } .variant-out-of-stock { font-size: 0.6em; margin: 0 0 25px; } } Play with the values as you like. I hope that helps :) -
Mailerlite integration landing page form to Squarespace
Square_Ace replied to Marytrala's topic in Customize with code
Hi, the GIF on this page https://www.mailerlite.com/help/how-to-add-a-form-to-your-website suggests there are two code snippets to paste in. The <script> you already have and a <div> snippet which you also need to include. Check your mailerlite form settings for this and add above the script tag in the code block.- 1 reply
-
- code-injection
- code
-
(and 2 more)
Tagged with:
-
Hi, I'll try to help with point 1 and maybe someone else can help with the rest as there's quite a lot here you want help with. I'm winging this (writing it direct to the forum) so I apologise if it doesn't work. Add the following to your Code Injection footer: <script> document.addEventListener('DOMContentLoaded', additionalProductContentMove) function additionalProductContentMove(){ const bodyClasses = document.body.classList, additionalContent = document.querySelector('.ProductItem-additional'); if(!bodyClasses.contains('collection-type-products') || !bodyClasses.contains('view-item') || !additionalContent) return; const excerptPosition = bodyClasses.contains('tweak-product-basic-item-description-position-below-price') ? 'ProductItem-details-excerpt-below-price' : bodyClasses.contains('tweak-product-basic-item-description-position-below-add-to-cart-button') ? 'ProductItem-details-excerpt-below-add-to-cart' : bodyClasses.contains('tweak-product-basic-item-description-position-below-add-ons') ? 'ProductItem-details-excerpt-below-add-ons' : 'ProductItem-details-excerpt'; document.querySelector(`.${excerptPosition}`).appendChild(additionalContent) } </script> And you'll probably want to reduce the gap, so add this to your custom CSS: .ProductItem .ProductItem-additional { margin-top: 20px } Use whatever margin value you like. I hope that helps :)
-
Applying bold hover in header & footer nav
Square_Ace replied to Jolene2023's topic in Customize with code
Hi try this custom CSS: #footer-sections .html-block a:hover, .header-menu-nav-item a:hover { font-weight: 700 } I hope that helps :)- 7 replies
-
- hover
- navigation
-
(and 3 more)
Tagged with:
-
Sorry, it was the comma I added in my code, try this: #block-yui_3_17_2_1_1730114850294_8800 .accordion-item__description { @media screen and (min-width: 768px) { display: grid; grid-template-columns: ~'40% 1fr'; grid-template-rows: ~'repeat(6, auto)'; column-gap: 20px; } &:before { content: ""; display: block; background-image: url(https://static1.squarespace.com/static/615c38d…/t/671f851…/1730118943289/leannes-co-process-detective-work.jpg); background-size: contain; background-repeat: no-repeat; height: 0; padding-bottom: 67%; margin-bottom: 20px; grid-row: ~'1 / -1'; } } Andrew
-
Hi Leanne, Firstly, you should remove display: flex from the accordion description and all your custom :before CSS and replace with this code: #block-yui_3_17_2_1_1730114850294_8800 .accordion-item__description { @media screen and (min-width: 768px) { display: grid; grid-template-columns: ~'40% 1fr'; grid-template-rows: ~'repeat(6, auto)'; column-gap: 20px; }, &:before { content: ""; display: block; background-image: url(https://static1.squarespace.com/static/615c38d…/t/671f851…/1730118943289/leannes-co-process-detective-work.jpg); background-size: contain; background-repeat: no-repeat; height: 0; padding-bottom: 67%; margin-bottom: 20px; grid-row: ~'1 / -1'; } } The 6, auto value is a random number that you won't have more paragraphs than. So if you know you won't have more than 3 paragraphs in an accordion you could set this to 3. The padding-bottom: 67% is the aspect ratio of your image (1667px high divided by 2500px wide) as a percentage. Set the column-gap and margin-bottom to the spacing you want. The grid will only be applied when the screen is 768px or wider. Mobile will stack the image above the text. I hope that helps :)
-
Hi, I don't think it's possible to force the desktop view for Squarespace because it's responsive and so everything on your site responds to the size of the screen. When you edit in mobile view, it won't/shouldn't change the desktop view. If you maintain your site using different screens (e.g if you sometimes work on your laptop and sometimes on your desktop monitor) that can cause changes in the layout of your Squarespace site. And some features carry across mobile and desktop. For example, if you have a grid blog on desktop, if you're in mobile view and change it to a masonry layout, it will apply that change to desktop too. When editing in mobile view, you should just be reordering/stacking/resizing blocks. Your site looks good on mobile, you just have to resize the blocks/sections so elements sit a bit closer together. Mobile and desktop are different. You can't expect a desktop site to look and work the same on mobile. It has to stack, and yes it will make your page longer, but it's easy to scroll through a page on mobile. People are used to it so you don't need to worry about that. I hope that helps :)
-
Hi, yeah I thought there would be a slight difference in the animation - that's impossible to avoid with the way you're doing it by having the header background and the button background image separate. To make it completely smooth you need the whole thing to be one element which would be a fair bit of work and would require the button image to be a vector-based SVG with a mask. It's not something I can do in a forum post, sorry. The reason the button stopped working is because the header has a style: pointer-events: none; So you need to add this line to your existing CSS for the sticky button: pointer-events: auto If you are keen to get it looking slick, send me a message and I can give you a price for the work.
- 3 replies
-
- navigation
- css
-
(and 1 more)
Tagged with:
-
Hover Text Not Appearing on Summary Block
Square_Ace replied to CFlo1's topic in Customize with code
Hi, that site password doesn't work- 4 replies
-
- summary-block
- summary
-
(and 1 more)
Tagged with:
-
Let's Get Creative with Code 👩💻
Square_Ace replied to inside_the_square's topic in Customize with code
Hi, I have a plugin for this: https://www.squareace.co.uk/squarespace-video-backgrounds-for-desktop-and-mobile I hope it helps. Let me know if you have any questions, thanks :) -
Summary Blocks: Image Full Block
Square_Ace replied to clementinedesigner's topic in Customize with code
Hi, what you want to do is certainly possible but to make it just like the example site would take a fair bit of work to make it work well for all screen sizes, adding the gradient background, controlling possible text overflow and general refinement - more than I can provide in a forum post. I can't decide whether it's better to make the image position absolute but I've gone with making the text content position absolute because you can set your image to a chosen aspect ratio in the Squarespace summary block settings. Here's the custom CSS: .summary-v2-block .summary-block-setting-design-autogrid .summary-item .summary-content { position: absolute; bottom: 0; left: 0; padding: 20px; width: 100%; } I hope that gets you started. If you want to mimic the example exactly or have a design in mind, I can give you a price for the work. -
Hi, you can see the transition CSS for the header on the header element, which is this: .tweak-fixed-header .header { transition: background 140ms ease-in-out 140ms, transform 140ms ease-in-out; } and this when at the top of the page: body.tweak-transparent-header .header:not(.shrink):not(.transparent-header-theme--override) { transition: background 300ms ease-in-out 0s, padding 140ms ease-in-out, transform 140ms ease-in-out 140ms; background-color: transparent !important; } But it's not just about matching these transitions because these transitions only occur when the header's shrink class gets added/removed. So you should put your button inside the header so you can use the header shrink class change to trigger when your animation occurs. Here is some code that should do that for you. Add this to your code injection footer: <script> document.addEventListener('DOMContentLoaded', updateStickyButton); function updateStickyButton(){ const stickyButton = document.getElementById('sticky-button') if(!stickyButton) return; document.getElementById('header').appendChild(stickyButton) } </script> Now your sticky button should be inside the header and you can use CSS like this to trigger the background image change: #header:not(.shrink) #sticky-button a { background: url("https://images.squarespace-cdn.com/content/66f471637fffe91698a23ffa/5f63af71-e5d5-4897-b7be-0312516ad1d8/LZ+Book+Now+Red+Transparent9.png?content-type=image%2Fpng"); transition: background 300ms ease-in-out 0s } #header.shrink #sticky-button a { background: url("https://images.squarespace-cdn.com/content/66f471637fffe91698a23ffa/a389bab5-08b3-499c-b591-ac8aaee9e38c/LZ+Book+Now+Red+with+Background11.png?content-type=image%2Fpng"); transition: background 140ms ease-in-out 140ms } Don't forget to remove/comment out your existing javascript you have triggering the button background change. It still may not 'blend' the transitions as well as you'd like though, it's tricky to get 2 separate elements (the button and the header background) to look as if they are one element when animating. And I'm not sure you can do a nice transition on background image (I could be wrong though) so a better solution might be to have the 2 background images on 2 elements and fade one in with an opacity transition rather than swapping them on the same element (you could use psuedo :before/:after elements). But have a go with what I've given you and it may be just what you need.
- 3 replies
-
- navigation
- css
-
(and 1 more)
Tagged with:
-
The issue is that whatever code you're using to create the accordions doesn't seem to work nesting an accordion inside an accordion. The group that contains Individual, Intensives and Groups has a max height set on it, which is what allows the accordion to work. Because of the max height, it cannot get any bigger when you expand Groups. You could add this CSS: .header-menu-nav-item--accordion-folder .accordion-folder-content { overflow-y: scroll } ...which I think will allow you to scroll within the container, but I don't think it works well. From what I can see it would require a custom javascript solution that updates the max-height when a nested group is expanded. That's too much to include in a forum post but let me know if you'd like a quote for the work. Andrew
-
Hey, try this custom CSS: .summary-v2-block .sqs-block-content:empty:after { content: 'Check back later'; display: block; text-align: center; font-size: 2em; } You'll have to adjust the styling and text as you want it to be. I hope that helps though.
- 3 replies
-
- summary-block
- events
-
(and 1 more)
Tagged with:
-
Glad I could help. Could you mark my answer as the solution please and thank you
-
Hi, I will take a stab at this without actually doing it/testing it. First, add this custom CSS: .spotify-container { position: fixed; bottom: 20px; right: 20px; height: 152px; width: ~'clamp(100px,200px,80vw)'; z-index: 100 } You can adjust the values as you wish. I've tried to make the width flexible and work across device sizes but you may need to tweak it. Then go to your code injection footer and paste this: <div class="spotify-container"> <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1jPEI1ZyAMuA4aLSsAxm8U?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> </div> Hopefully it just magically works :)
-
Hi, I'm not entirely sure what you're trying to do but you don't need static IDs to target these nav links. Here is some CSS that allows you to target the 3 nav links individually: .header-nav-item { &:nth-child(1) { // styles for the first link } &:nth-child(2) { // styles for the second link } &:nth-child(3) { // styles for the third link } } The IDs are not documented because they shouldn't be used in most cases. Tutorials that advise using them are, in my opinion, incorrect and likely to cause issues in the future. If you know your CSS you don't need to use them. I hope that helps.
- 1 reply
-
- css
- navigation
-
(and 3 more)
Tagged with:
-
Hi, that looks like it needs to be seriously unpicked. You might have more luck getting an answer if you can share a link to your site so the actual code in the browser can be inspected.
-
Syncing Web View Buttons to Mobile View
Square_Ace replied to rad1234's topic in Customize with code
Hi, you can't 'hover' on mobile. If you tap the button, the CSS above should still work but it will also be in the process of doing whatever that button should do (i.e loading a new page). -
Hi try adding this custom CSS: .grid-image-wrapper.has-hover-img img { &:first-child { opacity: 1 !important } &:not(:first-child) { display: none !important; } } I hope that helps. Andrew
-
Safari is adding a black underline on my links
Square_Ace replied to KMills's topic in Customize with code
Hi, I don't know of a fix for this. Safari sometimes acts differently - it's not as easy to code for as Chrome. I think there's a simpler way to do this though. If you want all text links in your 'Lightest 1' palette sections (i.e with white background) to have black text and a blue underline, then remove the black text color you added to the links first. You can do this by selecting them and clicking on the color button where you added it in the first place and clicking the black colour again (this should toggle it off). This will make your links blue again as this is the default color. Now go to your color palette editor and edit the Lightest 1 palette. Scroll down to the Links colors and change text links to black. Your links will now be black with blue underlines. Now in your custom CSS remove the code I previously gave you: span[class^="sqsrte-text-color--"] { text-decoration: none } Your existing custom CSS specifies that links should have a blue underline, so keep that, and it should function as you want it to. -
Custom CSS for TTF file font uploads
Square_Ace replied to LizStewart's topic in Fonts, colors and images
Hi, Use the code below except remove PUT_YOUR_CURSOR_HERE and put your cursor there. Then click the add files button and upload your TTF file, then click on it to add the URL for that font file. These instructions can be found in the support documents. /* Custom font for Agent 'C' */ @font-face { font-family: 'Agent C'; /* Name for your font */ src: url('PUT_YOUR_CURSOR_HERE') format('truetype'); /* URL-encoded for space and single quote */ font-weight: normal; /* Use normal weight */ font-style: normal; /* Use normal style */ } /* Apply the Agent C font to body text */ body { font-family: 'Agent C', sans-serif; /* Fallback to sans-serif if not available */ } /* Apply the Agent C font to headings */ h1, h2, h3, h4, h5, h6 { font-family: 'Agent C', sans-serif; /* Fallback to sans-serif */ } I hope that helps.