-
Posts
489 -
Joined
-
Last visited
Content Type
Forums
Downloads
Store
Events
Blogs
Gallery
Profiles
Everything posted by JayVanDyke
-
@kaydotjpg if you change the distance one it won't go off screen, just make that number lower. Aside from that, if you want the control that other site has you would likely need to either purchase the plugin or hire someone to create it. That SS site you found isn't using the plugin, it's just someone's custom javascript and an SVG logo. This is using just some CSS stuff so it doesn't follow the mouse scroll the way a javascript solution might. What other options are you looking for?
-
@kaydotjpg they have a fairly custom one that's using an SVG logo but this is some css that can get close-ish to it. You'll want to adjust the sizes of everything for your site. Your Header needs to be set to "fixed" for this to work. Try this out and see if it does what you want and then maybe it can be adjusted for mobile if that's the goal there too. @distance: 90vh; @size: 8; #header { .header-title-logo a { transform: translateY(@distance) scale(@size); transition: all .3s; } &.shrink { .header-title-logo a { transform: translateY(0) scale(1); } } }
-
You can do that within "Assign Styles" without code under Site Styles > Fonts > Assign Styles > Blog Basic Grid. Youll see all the items right there, screenshots attached. But you could do something like this .collection-type-blog-basic-grid.view-list .blog-title { font-size: 40px; // add !important if its not seeming to work }
-
Can you make your site password protected and share the password so we can see it? The link you have here is your back end editor link and when you try the real one it says private. https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords
-
hmmm somehow I just didn't catch the different containers on this one. This should be the last one! #siteWrapper .hentry.sold-out { .sqs-add-to-cart-button { background: #d3d3d3; color: #333; border: 3px solid #333 !important; opacity: .7; .sqs-add-to-cart-button-inner { font-size: 0; &:before { content: 'Sold Out'; font-size: calc(~"var(--primary-button-font-font-size-value) * 1rem") !important; } } } }
-
sorry, typo. This should work #siteWrapper .hentry.sold-out { .sqs-add-to-cart-button-inner { background: #d3d3d3; color: #333; border: 3px solid #333; color: #333; opacity: .7; font-size: 0; &:before { content: 'Sold Out'; font-size: calc(~"var(--primary-button-font-font-size-value) * 1rem") !important; } } }
-
Ahh ok, change it to this then #siteWrapper .hentry.sold-out { .sqs-add-to-cart-button-inner { background: #d3d3d3; color: #333; border: 3px solid #333; color: #333; opacity: .7; } font-size: 0; &:before { content: 'Sold Out'; font-size: calc(~"var(--primary-button-font-font-size-value) * 1rem") !important; } }
-
@GregOvens glad to help! #2 - I think you'll probably just want it to be invisible but still take up the space otherwise the buttons might come out of alignment so maybe try this for hiding the price and the sold out? .products.collection-content-wrapper .sold-out{ .grid-main-meta .grid-prices { opacity: 0; //hide pricing } .product-mark.sold-out { opacity: 0; //hide sold out } } #3 - looks ok to me on the live page, maybe it's just not showing properly in the editor or you fixed it? That does happen sometimes with custom code, always check the live version first before changing things in that don't seem to be working in the back end. Sometimes the CSS changes will just not change unless you reload the page.
-
Let me know if these work. 1. Landing page color could be changed like this with css .products .sold-out .sqs-add-to-cart-button { background: #000; //change to your color } 2. This is attached to the price in that section. Where did you want it to be moved to? Without some scripting you may be kind of limited with where it can go. 3. Try this css for the color and words of the purchase button #siteWrapper .hentry.sold-out { .sqs-add-to-cart-button-inner { background: gray; font-size: 0; &:before { content: 'Sold Out'; font-size: calc(~"var(--primary-button-font-font-size-value) * 1rem") !important; } } } 4. Similar to #1, see if this works. Upload your image to the file section in the custom css window and link it there. Adjust widths and positioning however you need! .products .sold-out .grid-image:after { content: ''; display: block; position: absolute; top: 10px; left: 10px; width: 25px; height: 25px; background-image: url(yourimageurlhere); background-position: center; background-size: contain; background-repeat: no-repeat; }
-
right/left arrows to navigate portfolio items
JayVanDyke replied to brubrusoso's topic in Customize with code
@brubrusoso its there, the color is just set to white instead of something else that you can see. In the color settings for your color theme you can find the portfolio color items. See screenshots. -
@BStrine your z values seem totally fine to me. Whats turning your text gray is the hover opacity for the :after element. Since that's also .45 opacity the white is getting some gray to show through. You're also changing the z index again in the hover which is overriding whatever zindex you gave it before. It still is mostly that the opacity is causing the gray to show through. Try this code instead of your last hover part. &:hover { .sqs-image-content { &:before { opacity: .45; transition: all 0.8s; } &:after{ opacity: 1; transition: all 0.8s; } } }
-
@Steph333 Try and add this to your css and replace your current content-wrapper code [data-section-id="6723e17f47456347850e94a1"] .content-wrapper { padding-bottom: 0 !important; padding-top: 0 !important; height: 0 !important; }
-
If you add it in there either myself or someone else can give you some code to fix it.
-
Gotcha, I think maybe I misunderstood by your title, I thought you were saying that you wanted the same divider above the footer on every page including your item pages. If you do want this on every page including your home page you would add it to the footer and remove it from the main page on all of your pages, after removing the divider within your page content on ALL pages it should look the same across each one because the footer is consistent no matter what page you're on. If you're only looking for it on the shop page then youd want to do the same thing but use some CSS to hide or show depending on what page you're on.
-
I would create a super short footer section above your current footer section and add the divider to that. You can't add them to product pages yet so you won't get that option except for in the footer. You can then remove the divider from your other pages and just keep the one in the footer for now which should end up looking pretty much the same.
-
@ErnestLeszyk you're missing a selector on the scroll snap part at the top and .section isn't a selector in squarespace. Also, this code, other than getting an error you can see in the screenshot, should have nothing to do with your site speed. if you're trying to target the main sections of your page you would do it like this, though I haven't tested it //Snap scrolling// #sections { scroll-snap-type: y mandatory; } section.page-section { margin: 0px auto; max-width: 1080px; height: 100vh; scroll-snap-align: start; } Alternatively you might want to try just paying for a plugin to make it easier since I don't know how widely accepted this css is. https://www.ghostplugins.com/products/p/snappy-page-sections?peachs_apc=jason-van-dyke - affiliate link...
-
Change shopping cart icon with uploaded image
JayVanDyke replied to lisbet's topic in Customize with code
@lisbet maybe this? I added another line to the end of the code you had so you can replace that with this. .header .header-actions-action--cart svg { opacity: 0 !important } .header-actions-action--cart .icon-cart-quantity { display: none } .header .header-actions-action--cart { background-image: url(https://static1.squarespace.com/static/5e7da489f524e90512c17a11/t/66d8a80b7037214d1f14c8a2/1725474827559/Shoppingbag_3.png) !important; background-size: contain; background-repeat: no-repeat; } -
@baylesofkayles not sure why but its possible the problem is with that specific checkmark and how iOS is handling it. I found another workaround that could make it work everywhere, try this in custom css replace this: #block-8c7ae582988d038093ae ul[data-rte-list] li>*:first-child::before { content: "\2714"; font-weight: 400; color: #00cd56; } with this: #block-8c7ae582988d038093ae ul[data-rte-list] li>*:first-child::before { content: "\2714"; font-weight: 400; color: transparent !important; text-shadow: 0 0 0 #00cd56 !important; }
- 5 replies
-
- css
- custom-css
-
(and 2 more)
Tagged with:
-
Different Logo (and logo link) on Different Pages
JayVanDyke replied to kaydotjpg's topic in Customize with code
Looks like you found the other link I put there! -
Different Logo (and logo link) on Different Pages
JayVanDyke replied to kaydotjpg's topic in Customize with code
@kaydotjpg This for changing the URL. Put it into the page's header code injection <script> document.addEventListener("DOMContentLoaded", function () { // Change URL for desktop logo var link = "newlinkhere.com"; var desktopLogoLink = document.querySelector(".header-display-desktop .header-title-logo a"); if (desktopLogoLink) { desktopLogoLink.setAttribute("href", link); } // Change URL for mobile logo var mobileLogoLink = document.querySelector(".header-display-mobile .header-title-logo a"); if (mobileLogoLink) { mobileLogoLink.setAttribute("href", link); } }); </script> This article has a guide on changing the logo on specific pages as well. https://www.thecoastkit.com/blog/how-to-update-logo-on-different-pages -
@baylesofkayles can you share your link? If the site isn't live yet you can add a password https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords
- 5 replies
-
- css
- custom-css
-
(and 2 more)
Tagged with:
-
Footer Injection Code Showing Up in Footer
JayVanDyke replied to kaydotjpg's topic in Customize with code
@kaydotjpg try this in your Custom CSS body:not(#collection-66e1f85031ff720c814003e3) .flier { display: none; } //the homepage also gets a .homepage class so you don't need the collection ID body:not(.homepage) .flier { display: none; } -
Lost the code for Header in Code Injection!!
JayVanDyke replied to SoniaW's topic in Customize with code
@SoniaW if your site was not public yet and you deleted the code you won't be able to retrieve it unless you happen to still have it open on a window somewhere in the original state. If your site is launched, sometimes if it gets crawled by The Wayback Machine you can find the old code in there but if not then you're kind of out of luck. What did the header code do? -
DNS link with Names.co.uk - All is well but SSL won't enable
JayVanDyke replied to MaxNix76's topic in Customize with code
@MaxNix76 We kinda need to see the whole thing to be able to tell. My assumption though is that this is an A record. You'll probably need to delete this one but I'm not sure what record isn't showing up yet.