creedon

Please post the URL for the page where your form is located. Also tell us which text you would like to change and what you want to change it to. I don't know if it can be changed but we won't know until we can get a look at your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

@Asher2020 Please post the URL to the page where you want this effect to occur. We can then take a look at your issue.

@marianaalvarado My bad I had a few errors in my previous CSS. I've updated it now. Please see my previous post. Let us know how it goes.

@marianaalvarado Remove (make a copy somewhere) or comment out your previous CSS and add the following to Design > Custom CSS. .newsletter-block .newsletter-form-header-title { font-family: adobe-garamond-pro; font-size: 70px; font-weight: 700; letter-spacing: 0.02em; line-height: 1em; text-transform: none; } .newsletter-block .newsletter-form-header-description p { font-family: adobe-garamond-pro; font-size: 24px; line-height: 1.65em; } .newsletter-block .newsletter-form-button { font-family: din-condensed-web; letter-spacing: 0.1em; } Let us know how it goes.

Nicely done! Thank you for sharing!

Please add the following Design > Custom CSS. @media screen and ( min-width: 576px ) { .products.collection-content-wrapper .nested-category-children::after { all: unset; } } I was unable to find the page with category titles on it. The URL posted is for the backend and we need access to the front end. To post the front end URL please take your site into Full Preview when you are on the page with categories. Then copy that URL from the address bar and post it here.

Please post the URL for the page with the gallery on it.

Please post the URL to the page with the grey horizontal lines. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue.

@marianaalvarado Please post the URL for the page with the button. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue.

Add the following to Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Page Settings > Advanced > Page Header Code Injection for the page with the form. <script> $( ( ) => { // begin dining outlet redirect const formSelectId = 'select-yui_3_17_2_1_1604067328695_32418-field'; const redirects = { /* enter options from select form field and redirect URL Slug or External URL */ 'Corks' : '/corks-x', 'Dining Room (Restaurant)' : '/dining-room-x', 'Lobby Bar' : '/lobby-bar-x', 'Tavern' : '/tavern-patio' }; // don't change anything beyond this point let $formSelect = $( '#' + formSelectId ); // get the redirect form let $form = $formSelect.closest ( 'form' ); $formSelect.change ( function ( ) { let url = $( this ).val ( ); if ( url !== '' ) url = redirects [ url ]; $form.attr ( 'data-success-redirect', url ); } ); /* end dining outlet redirect */ } ); </script> Let us know how it goes.

I see the form!

We have to take a different tack to accomplish this. I've updated the code in my previous post. For desktop we use grid and on mobile we use flex. Remove or comment out the following code in Design > Custom CSS. .product-quantity-input { margin-right: 400px !important; margin-top: 0px !important }

I've updated my previous post. Is that the order for which you are looking? Also you will want to remove or comment out the following CSS from Design > Custom CSS. .product-price { order: 2 !important } .product-quantity-input { order: 3 !important } .ProductItem-details .sqs-add-to-cart-button-wrapper { order: 4 !important } .ProductItem-details-excerpt { order: 5 !important }

The code @tuanphan posted was for a Squarespace v7.0 site. Your site is v7.1 and requires different code. Add the following to Store Settings > Advanced > Page Header Code Injection. <style> /* There is something odd going on with v7.1 CSS as of 11/04/20 .ProductItem-details-checkout has a rule of display block but sub elements have order properties on them. The first bit of CSS unsets those items for a clean slate returning the elements to natural order. */ .ProductItem-details .product-quantity-input, .ProductItem-details .product-variants, .ProductItem-details .ProductItem-details-excerpt, .ProductItem-details .ProductItem-product-price, .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-ordinal-group: unset; -ms-flex-order: unset; order: unset; } .ProductItem-details .product-variants { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; width: auto; } .ProductItem-details .ProductItem-details-excerpt { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .ProductItem-details .ProductItem-additional { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } @media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) { .ProductItem-details .ProductItem-details-checkout { -webkit-column-gap: 3vw; -moz-column-gap: 3vw; grid-column-gap: 3vw; column-gap: 3vw; display: -ms-grid; display: grid; grid-row-gap: 3vh; row-gap: 3vh; -ms-grid-columns: 1fr 3vw 1fr 3vw 1fr 3vw 1fr 3vw 1fr; grid-template-columns: repeat( 5, 1fr ); } .ProductItem-details .ProductItem-details-checkout > * { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1 / 6; margin: 0; margin-right: 1vw; } .ProductItem-details .product-quantity-input { -ms-grid-row-align: end; align-self: end; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; margin-right: 0; } .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-row-align: end; align-self: end; -ms-grid-column: 2; -ms-grid-column-span: 4; grid-column: 2 / 6; width: auto; } } @media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) { .ProductItem-details .ProductItem-details-checkout { display: -webkit-box; display: -ms-flexbox; display: flex; } } </style> Let us know how it goes.

@coriwhat Most likely the issue you are having is the code was designed for a different version of Squarespace or you are using a different template. Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue.

I'm not seeing a form on that page. It would help if we had a form with which to work.

I and others would be happy to take a look at your issue. I suggest starting a new thread on the forum, describe what you need and then we can take a look. Be sure to post the URL for the page with your form. If your site is not public please set up a site-wide password, if you've not already done so. Also post the password.

It is crazy! I've had to do that sometimes. True but we're trying to do stuff SS didn't intend for us to do. The main problem is in other circumstances there isn't anything to key off of that I can see. I haven't spent a lot of time digging into this but if anyone sees some way getting this done, please pitch in! For example the whitprint.com/testcombo page doesn't seem to contain any references to the categories you mentioned. The data-collection-id is a reference to the page itself but doesn't give us any context about what is happening on that page.

You have to make the editor wide enough to get the <> button to appear. I wish the <> button were first as I use it much more than link or quote! 🙂 I'll be interested to see the code you came up with! Thanks in advance for posting it!

Please see Organizing products.

Add the following to Design > Custom CSS. @media screen and ( max-width: 799px ) { #header { background-color: #F2F1D4 !important; } body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .light-bold .burger-inner .top-bun, body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .light-bold .burger-inner .patty, body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .light-bold .burger-inner .bottom-bun { background-color: black; } } Let us know how it goes.

No. You need to target the correct element. Take the font properties you added out of the CSS I provided above and add the following to Design > Custom CSS. .header-actions-action--cta a { font-family: 'Inter'; font-weight: 400; } Let us know how it goes.

Please post your site-wide password.

It works for now but I think SS didn't intend for HTML to go in that field and some day they might change the behaviour. Also don't depend on the technique working in other places. If it does break in the future there are other ways the same end result could be accomplished.

@Jprood I think I have the answer to your issues. First remove (make a copy) or comment out any code that you added in previous attempts. Add the following to Design > Custom CSS. @media ( hover: none ) { .cursor { display: none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: absolute; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width 0.6s, height 0.6s, background-color 0.6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } Add the following to Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.pageX, top: e.pageY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } ); </script> You will need to change the colors to match your color scheme. Let us know how it goes.