Jump to content

atmos

Member
 View Profile  See their activity

  • Posts

    28

  • Joined

  • Last visited

 Content Type 

Everything posted by atmos

  1. atmos
    Thank you so much for your help. I never would have figured that out on my own. Really appreciate it! I noticed that you have a Buy Me A Coffee site. I’ll definitely contribute something. I may take you up on your paid Squarespace service too at some point if you can help with the optimisation side of things.
  2. atmos
    @Lesum it looks great on my end. Would you mind checking it on your side like you did with the product page?
  3. atmos
    @Lesum That's great. Thank you so much! Would you mind providing the altered code which I can apply the same settings to the cart page too? When I tried to change body[class*="type-products"] to #cart earlier, it didn’t apply the darkened box to the cart page.
  4. atmos
    @Lesum The new code moves the navigation bar to a different position in the header. I just noticed It’s been moved up slightly
  5. atmos
    @Lesum That's ok no need to apologise. I’m very grateful for your help! I have added the new code
  6. atmos
    @LesumI have updated it to the latest code you shared. Please let me know if that works on your side
  7. atmos
    It looks like that did the trick. Thank you! Is the box set to the same size of the header even if the header gets made smaller (it probably wont but thought I’d ask.
  8. atmos
    body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(100% - 49px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(100% - 100px) !important; } } This is the code I added
  9. atmos
    No, I just copied and pasted what you shared with me.
  10. atmos
    I didn’t modify that as far as I am aware. I just copied and pasted the code you shared. I have removed it and copy and pasted it again to see if that changes how it shows on your screen
  11. atmos
    I did. It’s probably because I didn’t press save. Please check again as it should be there now
  12. atmos
    @Lesum Apologies, I misunderstood. I have already added the code and that is where I am at right now. This is in reference to my product page. The code you shared adds a dark box but it only half covers the header image I added
  13. atmos
    Sure. This is the code for the header image on the product page. body[class*="type-products"].view-item header#header { background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 51.4vh; } body[class*="type-products"].view-item header#header { .header-nav-item * { color: white; } :not(.header--menu-open) .header-actions .icon--fill svg { fill: white !important; } span.sqs-cart-quantity { color: white; } a.btn { background: white; color: black; } .burger-inner>div { background-color: white !important; } } @media only screen (max-width: 1024px) { body[class*="type-products"].view-item header#header .header--menu-open .header-menu { padding-top: 170px !important; } }
  14. atmos
    Thank you. That code seems to work but it only covers part of the header image. Do you know how to make the box extend to cover the full image? This is the code I have for the image and height if that helps body[class*="type-products"].view-item header#header { background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 51.4vh; }
  15. atmos
    @Lesum Hi, so just to check, will that code affect all of the product pages which currently use the same header image? If I want to do the same for the cart page, could I replace body[class*="type-products"] with #cart to get the same effect? Thank you
  16. atmos
    @tuanphan Hi, yeah sure. Here’s some links to a product page and the cart page. https://www.atmos.productions/store/p/poetry-for-the-blind-paperback https://www.atmos.productions/cart
  17. atmos
    Yes that is correct. They are not in a gallery though and are separately placed images as it gives me more control on the presentation/layout.
  18. atmos
    Hi, I have added some headers to the cart and product page but I want to add a code similar to the one below so that the navigation text is easier to read. Screenshot attached to help with this. filter:brightness(40%) When I try to add this line of code, it ends up affecting both the image and anything else in the header (announcement bar and navigation text etc). I want to add the correct code into here somehow: body[class*="type-products"].view-item header#header { background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 51.4vh; } Any help would be most welcome Thank you EDIT: While on this topic, does anyone know how I can add a heading to these headers using CSS so that they look the same as the ones on my other pages. I’d like to add “Product” to the product page header and “Cart” to the cart page header. I have attached another screenshot to show you how I want it to look like based on another page.
  19. atmos
    Hi @Lesum, I was wondering if you know how to solve the header issue? Thanks, Atmos
  20. atmos
    Hi, that is correct. Eventually I’d like to join up these lightboxes of single images on a page too but I know i will need a third party app at that time
  21. atmos
    Hi that worked great. Do you know how I can darken the background image similarly to the header images on my other pages? It needs to be darker so that the white text is more visible. If it helps, the overlay opacity for my headers is set to 75%. I have attached a screenshot to show you what I mean. Hope this helps. I was also wondering if there is a way to add a large heading in the header, similar to the “Drawing” heading I use on another page? I’d like the alignment to be the same as this page if possible. I really appreciate your help so far, thank you!
  22. atmos
    Hi Lesum, I was wondering if you’ve had a chance to think of the suitable code needed for this task? Hope to hear from you soon. Thanks, Atmos
  23. atmos
    Hi, thats ok. It’s still a helpful bit of code to add to my vocabulary. I’m happy with the same image for each product page to keep things more simple. I’d like to add a similar image/header to my events pages as well.
  24. atmos
    Hi, this one didn’t seem to fix my issue. The header than I created was actually another section which has a background to it. I’d like the background of a chosen image to fill the header and some space underneath it. I’ve attached another screenshot to hopefully show you what I mean. This code only appears to change my logo (which is still helpful to know for the time being. I would like my product pages to have a white logo in the top left hand corner, white text for the navigation bar, and a header with the same layout I made by adding a section on regular pages. Hope this helps
  25. atmos
    Hi Lesum, this was just what I was looking for in relation to the order. Thanks for sharing!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources