BriGuy

Hi Ninahans: This is for 7.0 - change the hex color #000000 below to the color you want. // Stretchy Navigation Line // .Header-nav-item::after { content: ''; background: #000000; //color height: 2px; //thickness width: 0; display: block; margin-top: 2px !important; transition: width 1s; //animation speed margin: 0 auto; } .Header-nav-item:hover::after { width: 100%; }

Hi Tuanphan! Go here: https://frameyourfeline.squarespace.com/aquatic-life/p/trout-throughout Password = CAT See how thin and hidden the previous and next arrows are for the product images? That what I need help with is making them stand out more. Like placing a background for the arrows and changing the thickness and color. Also, BONUS POINTS if there is some way to dissolve between product images. 🙂

Hi All! So, I used the SF Digital plugin "Product Slideshow" on a website built in SS 7.0. Well, I am rebuilding the site in SS 7.1 and SF Digital does not have the same plugin for SS 7.1. QUESTION #1) What that plugin did was make the transition between slides on the product page dissolve nicely from one image to the next. You can see this dissolve transition here from the plugin on the SS 7.0 site here: https://frameyourfeline.com/bar/meowtini-time. The SS 7.1 slideshow does not dissolve. Is there some code to achieve a nice dissolve from one image to the next in the Product Slideshow? QUESTION #2) Also, you can see the previous and next arrows much easier with that plugin because there is a shaded background behind the arrows and arrows are white. How can I code the same effect for the SS 7.1 site? Many thanks in advance! -Brian-

Hey Sam! You just earned yourself a virtual beer from me! Thanks for the help ~ it solved my issue! Thanks!

Hi All: I have a form block in lightbox mode with a background color. The issue is that when the form is not open the background color is around the button. Ahhh! How do I hide the background color around the form button when the form is not opened? Go here: https://sav-lux-insurance-services.squarespace.com/contact-us Password: SAVLUX You'll see the color around the "Start the Conversation" button. Help is MUCH appreciated. -Brian-

Thank you TheSquarespacer!!!! I must not have had enough coffee this morning! It worked!!😀

Hi All, I have more than one accordion block on different pages. Each one I would like to individually target with different images that appear in each drop down. Here is the code I have for one specific accordion block: li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } li:nth-child(2) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ec35733e724e83427a1b/1673129013381/Schedule.pnghttps://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } li:nth-child(3) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ed1e3076140ca487fec6/1673129246797/ShipmentTracking.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } The problem is I have another accordion block elsewhere on the site that is picking up this code and I don't want it to. The block ID # is "#block-yui_3_17_2_1_1673123629170_6403" for the accordion block I'd like to target the above code to. My question is where do I put the block ID# in the above code to isolate the code to ONLY affect this one specific accordion block? I know this seems like a dumb question but nothing I have tried works. Thanks for any help on this.

Hi tuanphan: Haven't heard back from you... hopefully you have a solution?

Yes, no title displayed initially... then on hover the image fades and the title is revealed. When the image fades I'd still like to see it slightly opaque.

Hi tuanphan: Sorry about that! Here is the product: https://frame-your-feline.squarespace.com/aquatic-life Password: FYF I have been able to successfully add a black outline and a drop shadow to the product image. However, I need it so when you scroll over the product thumbnail it reveals the product title and the product image gets faded (but not all the way to pure white). Right now I am unable to do that it it's driving me nuts. You can see the effect I am going for on the current 7.0 site here: https://frameyourfeline.com/aquatic-life Scroll over the product thumbnails and you'll see the effect I am trying to do on 7.1. Your help is appreciated! -Brian-

Hi: I am rebuilding a site on SS 7.1 that is currently on SS 7.0. In the 7.0 site the product thumbnail: 1) Has a black outline 2) Has a drop shadow effect 3) The product title shows on hover (with the image slightly opaque) You can see how it looks on 7.0 here: https://frameyourfeline.com/aquatic-life Here is what I have been able to do so far with the product title showing on hover on the 7.1 site here: https://frame-your-feline.squarespace.com/ Password: FYF I need help with code to achieve #1, #2, & #3 above. Here is the code I have used so far trying to solve #3 - but with no luck: .products.collection-content-wrapper .grid-image-hover { opacity: .0 !important; } /* product title price on hover */ section.grid-meta-wrapper { position: absolute; top: 50%; left: 50%; margin: 0 !important; width: 100%; transform: translate(-50%,-50%); opacity: 0; transition: all 0.3s; pointer-events: none; } .grid-item:hover section { opacity: 1; transition: all 0.3s; } Help with the above is super appreciated! 🙂

Hi Caterina, I just checked out your site. How did you go about doing this? I need to do this too. You're help would be greatly appreciated. Thanks!

Wow! I too am having an issue with Search not functioning and came to the board to find out why and now I see this has been going on for about 2 years. Bloody hell! What is with the people behind SS??? Stop everything and fix the damn issue already!

@tuanphan you're a genius! That worked! Thanks!

Hey, thanks @sayreambrosio!! Glad you like it! 😄