Oliokd123

Hello, I would like the order of my shipping options changed so that my free UK shipping option appears first rather than my external UK option which is £17.50. Since that option appears first, people are being put off by the shipping fee. Is there a way to do it?

yes it is but it changes colours too soon , I want the section to change colour after 80% of it being scrolled not 50% so it flows better similar to the demo link provided . I also want it for multiple sections. When applying the colours also don't look right , they come across as muddy.

I want to create a scroll activated colour background for my website similar to the demo here (https://webdevtrick.com/javascript-change-background-color/?amp=1) how can I apply the code from this to my website?

Hi , how do I have it so section colour blends from one to another without a paid plugin , i've seen multiple ways but can't seem to implement them. this is my website https://oliknowles.com/services-3 Thanks in advance

Hi , Is this still possible to add to a Squarespace 7.1? in the github project do I need to seperate the html to javascript and css , I want to add a background colour change to 3 sections on my website is that possible using your code? Sorry I am still learning and want to learn coding

Is this scroll colour change with sticky images possible on Squarespace? I am wanting to replicate this on my site. Is this possible with css? Screen Recording 2024-02-13 at 22.47.28.mov https://www.tiltongroup.com/

Thank You ,I really appreciate it!

yes please!

Hi how can i change the colour of my text in the lists so they are 3 different colours ? This is the code I have and also for some reason the images arent working when you click on them , they should link to the links provided . thanks in advance! website is : https://www.oliknowles.com/servicessub?rq=service This is the code : /* Targeting specific list items within the section */ [data-section-id="65bb95226d34407ab7877411"] .list-item:nth-of-type(1) { background: #be4127 url('https://www.oliknowles.com/servicessub/brandidentity') center center no-repeat; background-size: cover; cursor: pointer; } [data-section-id="65bb95226d34407ab7877411"] .list-item:nth-of-type(2) { background: #4d6c18 url('https://www.oliknowles.com/servicessub/bespokeillustration') center center no-repeat; background-size: cover; cursor: pointer; } [data-section-id="65bb95226d34407ab7877411"] .list-item:nth-of-type(3) { background: #559b99 url('https://www.oliknowles.com/servicessub/weddingstationery') center center no-repeat; background-size: cover; cursor: pointer; }

Hi does anyone know how to create the effect of the stacking sections , I know they are sticky but how do I have it so the text increases and decreases etc? the section id is section[data-section-id="659ab97d45a83b75e2b50e14"] https://standoutsquare.space/ Screen Recording 2024-01-30 at 17.03.43.mov

How do I add a scroll triggered gallery like this ( https://codepen.io/cameronknight/pen/qBNvrRQ) onto my website using GSAP? How do I make it work? Thanks in advance

How can I have it so that when I hover over the different names in a portfolio hover section the text changes colour and goes to italic ? I want the colours to be for the following : Wedding Stationery #79c5cf , Bespoke Illustration #b9da5a and Brand Identity to be #fb8f73 Thanks in advance!

Yes of course it's https://www.oliknowles.com/blog it's the section under previous posts

is there a way of customising the tags in an archive for a blog so that they are different colours i.e Wedding Stationery blue , Brand Identity red etc?

how do I dynamically invert my logo and menu bar so that on darker backgrounds it inverts to white , the collection id is #collection-64f9b6cdca08bb7aeb28959f i've tried using css ; /* Initial style for the section to be inverted */ #collection-63f4ddb26d6f7d40320b67ac { background-color: white; /* Set the default background color */ transition: filter 0.3s ease; /* Add a smooth transition for the filter effect */ } /* Additional styling to customize the appearance of the inverted section */ #collection-63f4ddb26d6f7d40320b67ac.inverted { -webkit-filter: invert(100%); filter: invert(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } and javascriipt : // Function to check the darkness of a color function isDarkColor(hexColor) { const r = parseInt(hexColor.slice(1, 3), 16); const g = parseInt(hexColor.slice(3, 5), 16); const b = parseInt(hexColor.slice(5, 7), 16); const brightness = (r * 299 + g * 587 + b * 114) / 1000; return brightness < 128; } // Function to apply the inversion based on background color function applyInversion() { const sectionBelow = document.querySelector('.section-below'); // Replace with the actual class or ID of the section below const invertSection = document.querySelector('.invert-section'); if (sectionBelow) { const backgroundColor = getComputedStyle(sectionBelow).backgroundColor; const isSectionBelowDark = isDarkColor(backgroundColor); if (isSectionBelowDark) { invertSection.classList.add('inverted'); } else { invertSection.classList.remove('inverted'); } } } // Call the applyInversion function when the page loads and on window resize (in case the section size changes) window.addEventListener('load', applyInversion); window.addEventListener('resize', applyInversion);

Sorry i've just noticed that it has now changed the cart colour to that only on mobile because of that order, is there a way of changing it?

Hi how can I target the pale cream text so it's the same colour on this page ( #232323) ? So far I have added this code and it hasn't changed it. #cart { color: #232323; } }

Thank You so much it's fixed it ! I really appreciate it

IS this correct ? It's still stating a syntax error with a missing closing } section[data-section-id="63f4dda3fbc59a38ea3e8097"] .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1px; } #cart { color: #232323; } @media only screen and (max-width: 767px) { .products .grid-item { width: 100% !important; }

Okay so i've done that and it's knocked out the rest of my code, there code be a syntax error again judging from the missing {

that seems to work it however it now has knocked the rest of my code out for some reason. Do you mind pasting all the code with the coreect syntax. Apologies I am new to this and learning

how strange!

Hi Lesum , it didn't work so I removed it however i've added it now for you to see., thanks for taking the time to look.

thanks for replying , it doesn't solve the issue sadly

Hello , please can you help?I am having issues with my shop on mobile( https://www.oliknowles.com). I have some custom CSS code which I think is conflicting with the store layout on mobile however I have been trying to rectify it but I can't get anywhere! When you look at the store on mobile the spacing is all wrong it should be neater and more compact, 2 items wide like the image below. I've also added my css code ; /* CSS stylesheet with various style rules and comments */ /* Invert colors of specific image */ #collection-63f4dda2fbc59a38ea3e8071 .header-title-logo img { -webkit-filter: invert(100%); filter: invert(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } /* Hide specific grid items on desktop */ .ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+4) { display: none; } /* Show additional grid items on mobile */ @media only screen and (max-width: 640px) { .ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+5) { display: block; } } /* Bold text in a specific section */ section[data-section-id="63f4dda3fbc59a38ea3e8097"] .product-price { font-weight: bold; } /* Remove background from a folder content */ .header-nav-folder-content { background: transparent !important; } /* Sticky sidebar for product categories */ .products.collection-content-wrapper .nested-category-tree-wrapper { top: 60px; position: -webkit-sticky; position: sticky; z-index: 9999; } /* Styling for a specific class */ .sqs-money-native { color: white; font-size: 20px; background: #31CE95; border-radius: 50px; padding: 10px 20px; } /* Styling for a fixed position element */ 643aca269fa02e5221e75a8e { position: fixed; top: 600; width: 50%; } /* Styling for a custom image slider */ .custom-image-slider { position: relative; width: 100%; overflow: show; height: 0; padding-bottom: 140%; /* Adjust this value according to your image aspect ratio */ } /* Styling for elements in the image slider */ .slider-before, .slider-after { position: absolute; width: 100%; display: block; top: 0; left: 0; height: 100%; object-fit: cover; } /* Styling for the 'after' part of the slider */ .slider-after { overflow: hidden; } /* Styling for the slider handle */ .slider-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background-color: #fff; cursor: ew-resize; } /* Styling for slider handle arrows */ .slider-handle::before, .slider-handle::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; cursor: ew-resize; transition: all 0.2s ease-out; /* Add transition property */ } /* Styling for slider handle arrow before */ .slider-handle::before { left: -24px; border-right: 16px solid #fff; } /* Styling for slider handle arrow after */ .slider-handle::after { right: -24px; border-left: 16px solid #fff; } /* Disable folder title links */ .header-nav-folder-title { pointer-events: none !important; } /* Hover effect on portfolio items */ .portfolio-hover-item-content:hover { font-style: italic; } /* Hover effect on portfolio item text */ .portfolio-hover-items-list:hover span.portfolio-hover-item-content { color: rgba(255, 255, 255, 0.3); } /* Hover effect on portfolio item text when hovered */ .portfolio-hover-items-list:hover span.portfolio-hover-item-content:hover { color: #fff; } /* Adjust layout on small screens */ @media only screen and (max-width: 767px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } /* Adjust layout on even smaller screens */ @media only screen and (max-width: 640px) { .YOUR-ITEMS-YOU-MIGHT-LIKE-SECTION-CLASS { display: grid; grid-template-columns: repeat(2, 1fr); /* Adjust the number of columns as needed */ grid-gap: 20px; /* Adjust the gap between items as needed */ } } /* Set background color of the body */ body { background-color: white !important; } /* Styling for SVG elements */ .svg-container { width: 100%; height: auto; position: relative; } /* SVG animation */ #animated-svg .cls-1 { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 6s linear forwards; } /* Keyframes animation */ @keyframes draw { to { stroke-dashoffset: 0; } } /* Zoom effect on accordion panel content */ #block-177826ff908d4b360137 .sqs-accordion-panel-content p { transition: transform 0.3s ease; transform: scale(1.3); } /* Reset zoom effect on accordion panel content on hover out */ #block-177826ff908d4b360137 .sqs-accordion-panel-content p { transition: transform 0.0s ease; transform: scale(1); } /* Styling for a fixed position element */ .brand { position: fixed; top: 50%; left: -100%; opacity: 0; white-space: nowrap; transition: left 1s, opacity 1s; } /* Styling for an active fixed position element */ .brand.active { left: calc(50% - 50vw); opacity: 1; } /* Styling for moving a fixed position element to the right */ .brand.move-right { left: calc(50% + 50vw - 100%); } /* Media query for adjusting the position on larger screens */ @media (min-width: 768px) { .brand.active { left: 50%; transform: translateX(-50%); } .brand.move-right { left: calc(50% + 50vw - 70%); } } /* Styling for a button element */ #block-e57ffd80610b7594ce81 .sqs-block-button-element { background-color: #3f8f96; color: #f4f2eb; } /* Styling for accordion block icons */ /* Sets the background image for the arrow container */ .accordion-block .arrow-container { background-image: url(https://static1.squarespace.com/static/63f369c0f2b5595ccc770837/t/64ae8468a037630b0bd7909c/1689158760735/icons8-check-500-01.png); background-position: center; background-repeat: no-repeat; background-size: contain; } /* Hides the arrow */ .accordion-block .arrow { display: none; } /* Changes the background image of the arrow container when the accordion item is open */ .accordion-item[data-is-open="true"] .arrow-container { background-image: url(https://static1.squarespace.com/static/63f369c0f2b5595ccc770837/t/64ae96d708669044c7be9d40/1689163480057/v2+icons8-ok-500-01.png); } /* Default CSS styling for various elements */ /* Main CSS styles for filtering and displaying products */ .filterTab_area { padding-top: 0px; } /* Styling for an active button */ button.active { background: black; color: #fff; } /* Styling for a grid of products */ .product_area-products { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 20px; margin-top: 80px; } /* Styling for individual product items */ .product_area-product { text-align: center; background: #f0f0f0; position: relative; overflow: hidden; } /* Styling for product images */ .product_area-product img { transition: transform 0.3s ease; } /* Hover effect for product images */ .product_area-product:hover img { transform: scale(1.0); } /* Styling for product content overlay */ .product_area-product-content { background: rgba(35, 35, 35, 0.65); /* #232323 with 65% opacity */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* Display product content overlay on hover */ .product_area-product:hover .product_area-product-content { opacity: 1; } /* Styling for product content text */ .product_area-product-content h3 { visibility: hidden; font-weight: 300; margin-bottom: 10px; color: white; /* Set the text color to white */ } /* Display product content text on hover */ .product_area-product:hover .product_area-product-content h3 { visibility: visible; } /* Styling for filter buttons */ .filterTab_area-buttons { display: flex; justify-content: space-evenly; /* Updated to evenly space the buttons */ align-items: center; gap: 10px; } /* Styling for individual filter buttons */ .filterTab_area-buttons button { padding: 10px 30px; border-radius: 50px; cursor: pointer; background-color: transparent; border: none; color: #2D2A27; /* Set the text color for the buttons to the same as the lines */ position: relative; overflow: hidden; transition: color 0.3s ease; } /* Styling for active filter buttons */ .filterTab_area-buttons button.active { color: #fff; /* Set the active button text color to white */ } /* Styling for filter buttons with specific data attributes */ .filterTab_area-buttons button[data-filter="all"].active { background-color: #232323; /* Changed to #F5500D (orange) */ } .filterTab_area-buttons button[data-filter="bespoke-illustration"].active { background-color: #2E6400; /* Changed to #3F8F96 (blue) */ } .filterTab_area-buttons button[data-filter="wedding-stationery"].active { background-color: #3F8F96; /* Changed to #2E6400 (green) */ } .filterTab_area-buttons button[data-filter="brand-identity"].active { background-color: #BE4126; /* Changed to #BE4126 (red) */ } /* Media queries for responsive design */ /* Media queries for medium and small screens */ @media screen and (max-width: 1024px) { .product_area-products { margin: 0 20px; padding-top: 60px; grid-template-columns: repeat(2, 1fr); } .card { overflow-x: auto; overflow-y: auto; text-align: justify; } .filterTab_area-buttons { flex-wrap: wrap; } .product_area-product-content { text-align: center; } } /* Media queries for small screens */ @media screen and (max-width: 600px) { .product_area-products { grid-template-columns: 1fr; /* Revert back to one column (one image wide) on mobile */ } .card { overflow-x: auto; overflow-y: auto; text-align: justify; } .product_area-product-content { text-align: center; } section[data-section-id="63f4dda3fbc59a38ea3e8097"] .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1px; } #cart { color: #232323; } }