smilebeard

On 5/17/2024 at 1:16 AM, tuanphan said:

Use this code to Website > Website Tools > Custom CSS (this code for Workshop Hard Seltzer item)

body:has(.fe-block-8970d9c79f63bd6a59ab:hover) .section-background, body:has(.fe-block-8970d9c79f63bd6a59ab:hover) .section-border {
    background-color: #f1f !important;
}

 

@tuanphan Amazing THANK YOU! 

One LAST question, is there a way to make the color transition (roll in and out) into it so it's not a hard cut when you hover over? 

Thank you so much

On 5/12/2024 at 3:59 AM, timjphoto said:

Hi there, 

I was following this as I was trying to do the same thing and I found this code worked for me:

//background colour change//

body {background: white;
transition: background 0.5s ease;}

body:has(#//your block id here!//:hover)
{background: #99ccff}

Hope this helps!

Thanks for jumping in! I just tried this but it isn't appearing to work. I've got a number of custom CSS and code blocks in here that might be interfering somehow? I'm super green to this stuff so most of it is pulling snippets from forums I've scoured haha

On 5/10/2024 at 2:31 AM, tuanphan said:

You mean similar this section?

@tuanphan yes exactly!

Thanks so much for breaking that down @Collaborada!

So you're saying that embedding the video vs uploading to Squarespace directly could potentially solve this issue?

Appreciate everything!

Hey @Collaborada Thanks for jumping in!

When you say "check to see if the video is uploaded to Squarespace" what do you mean exactly? It's a background video to that section so I assume it's uploaded to squarespace right? OR do i need to upload it a specific way (like in the website tools / code injection spot)?

I also have gifs playing in each of the image blocks when you hover over them...

Thanks so much!

Jordan

@Sifat_SEOSpace Wow, thank you for taking the time to break this down for me. I am thinking that it is the custom code that may be affecting Google crawlers but, as someone who doesn't really know anything about coding, I wouldn't really know what to look for here.

Is there any chance you have an idea what that could be? I could screengrab the codes I've added.

Thanks so much,

Jordan

Google Seach Console informed me that I have a Soft 404 and it has stopped indexing my website.

As a graphic artist, I'm a fish out of water with this sort of thing. It looks like it's my homepage setting off, potentially triggered by a mobile robot? Because this is a big source of discovery and how I make a living, ANY help to better understand what's going on would be GREATLY appreciated. 

I have a few custom coded elements on this page and I read that background videos could be a trigger here too...

I screenshotted a bunch of the learnings from GSC to hopefully help provide context.

Thank you so much!

Jordan

On 4/26/2024 at 1:15 AM, tuanphan said:

Can you share link to your site & let me know which image - which section you want to apply? We can check/test code easier (I think this is possible with some CSS/script, but not sure will have a nice transition).

@tuanphan Here's a link to my site: https://www.jordanwilsondesigns.com

Ideally, it would shift the background of the middle section (with the thumbnails of the work), where you could hover the mouse over each of those 7 thumbnails and each one would change the background color accordingly. Again, the same way https://hoodzpahdesign.com/ does it on their site.

Thank you!!!

Hello, I'm looking for a way to change the background color of a section to a specific background color whenever you hover over a (clickable/linked) image. I'm hoping to have a few different images in the section, each of which would change the background to a different color once you hover them. 

Here is an example: https://hoodzpahdesign.com (scroll down a little)

I have found this tutorial HERE but I'm really looking for a nice fade/transition between colors and not a stark immediate change.

Any help here would be amazing.

Thank you!

On 8/12/2023 at 10:10 AM, Lesum said:

You can also try to add the code snippets I used:

1. First create a code block where you want to place the animation. Inside the code block, add the code below:

<h1>
  BECOME A <br>
  <span class="typewriter"></span><br>
  OF THIS REALM
</h1>

2. Then on your Squarespace dashboard, go to Settings > Developers Tools > Code Injection

Add this code under Header:

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

Then add this code under Footer:

<script>
    var typed = new Typed('.typewriter', {
      strings: ['Student', 'Master',  'Light'],
      typeSpeed: 120,
      loop: true
    });
</script>

Let me know if you face any issues. Thanks! 

@Lesum I just stumbled across this and it's fantastic! I'm wondering if you could happen to help me accomplish this same thing, but change (just) the color hex AND italicize the animated/type words?

Thanks!