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! 🙂

On 7/25/2022 at 6:42 AM, chumbit said:

Hello! I tried Google search engine and it will  solve my problemas thanks! We are planning in using it.

However, we would like to use it through the search bar that we in place, instead of google, do you know if its possible? (http://www.chumbo.org)

Thanks in advance.

Catarina

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!

8 hours ago, sayreambrosio said:

Absolutely LOVE elephants and the way you incorporated it.

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

10 hours ago, tuanphan said:

you can add width value to this code on the code I sent

.sqs-announcement-bar:before {
    height: 10vw;
    position: relative;
    left: -5vw;
}

 

Hi @tuanphan - thanks! The image is now centered. But is still tiny in mobile view. Any way to have that image be bigger in mobile view?

Beside designing/building websites. I also create logos for clients.

A great logo MUST follow these rules:

A) Scalable (looks great and is legible the size of a postage stamp or the size of a billboard)

B) Memorable

C) Looks fantastic in both black & white as well as in color

D) Not too detailed (if there is too much detail or shading that gets lost when the logo is tiny... sometimes rendering the logo as unreadable).

Here is the logo for my creative company "OneBite Creative" that I designed.

@tuanpan VERY CLOSE! The text is now perfect... however, the image I have appearing above the text is really, really tiny (and just a tad off center). Any way to have the image appear larger in mobile (and be centered)?

Wow. The arrogance runs high. 

Sure. What would we designers know about design when they have a complete mess of a bug that hinders design.

I have no words...

Hi Tuanpan:

To see it go here:
www.ArcheryPassport.com

Password=
archeryp@ssp0rt

I appreciate you Tuanphan! Let me know what I should do. Thanks.

Best,

-Brian-

I haven't seen a work around this bug yet. Still looking. But SS Dev Team should have RESOLVED known FE bugs before going live with it to the public. Who's running the show over there?! 

Hi All!

BIG QUESTION!

I have added custom code to have an image in the announcement bar. And it looks great on desktop.

However, in mobile view the announcement bar needs to be larger in height and the image needs to be bigger. What to do?

Here is the css code I am using for the announcement bar currently:

.sqs-announcement-bar:before {
  content:"";
  background-image: url(https://static1.squarespace.com/static/626182fac67c5563ad2be7aa/t/62dab342baafeb4a6b3e14ba/1658499906283/noun-under-construction-4891363.png);
  background-repeat: no-repeat;
  background-size: contain;
  float: right;
  margin-left: 150vw;
  width: 50vw;
  height: 2.5vw;
}
.sqs-announcement-bar-text {margin-right: 2vw;
height: 2.5vw}


.sqs-announcement-bar {background: linear-gradient(to right, #ffcc00, #ffff00, #ffcc00)!important}

What do I do to increase the height of the announcement bar and increase the size of the image in mobile view?

Hi tuanphan:

I have tried header#header and no luck.  Here's what I have in CSS:

++++++++++++++++++++++++++++++++++++++

header#header {
  background: linear-gradient(-45deg, #6395ce, #545aa8, #934f9f) !important;
  background-size: 400% !important;
  -webkit-animation: Gradient 6s ease infinite !important;
  -moz-animation: Gradient 6s ease infinite !important;
  animation: Gradient 6s ease infinite !important;
}

+++++++++++++++++++++++++++++++++++++++

Is the way I have the code wrong?

Or, is it that I have the header set to "Solid" - do I need to have it set to something else?

Thanks in advance for your help!

-Brian-

Site URL: https://cyan-blueberry-rbpp.squarespace.com

Hi Everyone,

I am trying to do some CSS Coding to have an animated background for the navigation header.

I have successfully figured out how to do it for the mobile nav:

++++++++++++++++++++++++++++++++++++++++++++++

// Animated Gradient Nav - Mobile //

.header-menu-nav, .header-menu .header-menu-bg {
  background: linear-gradient(-45deg, #FA77CE, #6395ce, #545aa8, #934f9f);
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

++++++++++++++++++++++++++++++++++++++++++++++

HOWEVER... trying to achieve this for the desktop has been an issue. Here is the code I created thus far:

++++++++++++++++++++++++++++++++++++++++++++++

// Animated Gradient Nav - Desktop//

.header {
  background: linear-gradient(-45deg, #6395ce, #545aa8, #934f9f) !important;
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

++++++++++++++++++++++++++++++++++++++++++++++

I have spent hours trying to get the animated gradient background to work on desktop but I haven't figured out a solution.

Can anyone help me solve this?

Here is the website I'm working on:

https://cyan-blueberry-rbpp.squarespace.com/

Password is 123456

Many thanks!

-Brian-

Hi Tuanphan, yes the image is aligned up top. 

Also, thank you Paul2009 for letting me know that this is indeed a bug. I will report it again through Customer Care as you have recommended. 

I must say that this bug is ridiculous as it hinders my design. They have had 3 months to address this. If they knew about it in April why didn't they fix the issue before releasing it to us in Circle? SMH.