Jump to content

badcrc

Member
  • Posts

    6
  • Joined

  • Last visited

Everything posted by badcrc

  1. This code doesn't seem to do anything to the empty cart or full cart page. My page is here: https://www.hcfreezedry.com/
  2. Thanks @tuanphan for the code, it works, but I wish I could get it to show on the product detail pages instead of the SS breadcrumbs. For anyone that wants to highlight the categories on hover, I added this to mine (change 'white' to your desired highlight color, 'black' to your text color, and '|' [pipe] to your separator character): /**** Highlight hovered category from tuanphan code ****/ .nested-category-tree-wrapper>ul>li:not(:last-child)> a:hover { color: white !important; } .nested-category-tree-wrapper>ul>li:not(:last-child)> a:hover:after { color: black !important; content:"|"; } .nested-category-tree-wrapper>ul>li:last-child> a:hover { color: white !important; } Here is the complete tuanphan code I'm using with the separator additions (I tightened mine up a bit so you might have to tinker with the margin and padding): /* Show category nav links credit tuanphan */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 100% !important; display: flex; justify-content: center; align-items: center; flex-wrap: wrap !important; } .nested-category-tree-wrapper>ul li { margin-left: 0.5vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } a.category-link.root { padding-top: 0px !important; } li.category-item:not(:last-child) a:after { content: "|"; padding-left: 5px; }
  3. None of the code here worked for me to ADD space between the header and product details (SS 7.1). @tcp13 gave me the following css and it worked. .pdp-gallery{ margin-top: 80px !important; }
  4. For some reason the code in this thread isn't working on my web site. I'm trying to increase the gap between the header and product details. I can't find anything that moves that main content down on every product page. I have the product details section set to "Wrap" instead of "Simple", because on mobile "Simple" was putting the add to cart button above the description. When it's set to "Wrap" it moves the product details all the way up against the header. I can't win. https://www.hcfreezedry.com/shop-all/p/freeze-dried-strawberry-shortcake-bites
  5. So there is no way to add a header background image on a product detail page? I'm trying to do the same thing and I started a new thread about it a couple days ago and got no response. Pretty annoying problem. I'm also trying to figure out how to add a background image to the header on the cart page and so far haven't found anything that works. I used this code and I'm able to change the header and cart background color, but I wasn't able to modify it to use a background image (I also need background image 60% opacity): /** Cart page header background **/ body#cart .header .header-announcement-bar-wrapper { background: #f0acd8 !important; } /** Product page header background **/ .collection-type-products.view-item.tweak-transparent-header .header .header-announcement-bar-wrapper { background: blue !important; } I also tried a bunch of different css code to add space between the header and the product image/description but none of it worked. It's strange how the product page is different than every other page, it makes it frustrating trying to keep things uniform.
  6. I'm helping a relative with their web site and I added a background image to the site header by changing the background on a small section right below the header. Then I noticed on the product pages there doesn't seem to be a way to do that, so it looks really strange going from the other pages with a background in the header to a product page and the site header is the same as the background color with no image. Is there a way to make it uniform on the product pages? Example here on the shop page with a background in the header: https://www.hcfreezedry.com/shop-all Then on a product page there is no background: https://www.hcfreezedry.com/shop-all/p/freeze-dried-key-lime-taffy Attached is what it looks like in the website builder on non-product pages, but there is no option for background or to add a section on the product pages.
×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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