Jump to content

atmos

Member
 View Profile  See their activity

  • Posts

    28

  • Joined

  • Last visited

1 Follower

Personal Information

Recent Profile Visitors

86 profile views

atmos's Achievements

Level 4

Level 4 (4/20)

  • Daily Visitor Rare
  • Dedicated Contributor Rare
  • Conversation Starter Rare

Recent Badges

0

Reputation

  1. WidleStudioLLP started following atmos
  2. 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.
  3.    atmos reacted to a post in a topic: How to add a filter to header images only?
  4. atmos
    @Lesum it looks great on my end. Would you mind checking it on your side like you did with the product page?
  5.    atmos reacted to a post in a topic: How to add a filter to header images only?
  6. 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.
  7.    atmos reacted to a post in a topic: How to add a filter to header images only?
  8.    atmos reacted to a post in a topic: How to add a filter to header images only?
  9. 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
  10. atmos
    @Lesum That's ok no need to apologise. I’m very grateful for your help! I have added the new code
  11. atmos
    @LesumI have updated it to the latest code you shared. Please let me know if that works on your side
  12.    atmos reacted to a post in a topic: How to add a filter to header images only?
  13. 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.
  14. 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
  15. atmos
    No, I just copied and pasted what you shared with me.
  16. 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
  17. atmos
    I did. It’s probably because I didn’t press save. Please check again as it should be there now
  18. 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
  19. 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; } }
  20. 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; }
  21. 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
×
×
  • 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