sarah_cowan

Site URL: https://www.findnorth.uk/home

Hi, I've seen this question asked on a few previous posts but none of the codes worked for me.

Basically I want the image in the header on the top right of the homepage (https://www.findnorth.uk/home) to stack underneath the copy the same as it does in mobile to create a cleaner look. Changing the mobile breakpoint just changes the navigation bar.

I've attached screenshots for reference below.

Thank you in advance!

Desktop view (fine):

Tablet view (text too long and looks messy)

Mobile view (how I want the content to stack in tablet view too).

On 8/17/2024 at 9:33 AM, tuanphan said:

Use some code like this

div#block-yui_3_17_2_1_1723214808527_50690:hover img {
    content: url(https://images.squarespace-cdn.com/content/v1/65bcc6bcea405932b75c37f6/3a077276-77de-42df-9b4b-30e8e610f75c/Staff_Placeholder-11.png?format=500w);
}

Just repeat the code but replace div#block....90 with Image Block ID. Each image will have an ID.

 

Works perfectly! Thank you so much for your help again @tuanphan!

3 hours ago, tuanphan said:

You can use this code to Website Tools > Custom CSS

section#home-who .image-block:hover img {
    content: url(https://images.squarespace-cdn.com/content/v1/65bcc6bcea405932b75c37f6/3a077276-77de-42df-9b4b-30e8e610f75c/Staff_Placeholder-11.png?format=500w);
}

 

Hi @tuanphan This works perfectly, thank you so much!!! 😄

These staff images are currently placeholders on the website while I wait for images from the client. I will be adding different staff photos for each thumbnail. I have updated these on the website to show you what I mean. Is there a code I can add so I can update the image URL for each image individually? Thank you!

9 hours ago, creedon said:

To sum up you want them all to be color and then on hover, over an individual image, to be not color? Also when hovered the decolored state should match the green background? Kind of like a sepia effect.

Yes exactly that 🙂 For reference the green/teal is #00AA9B

Hi,

I've seen this question in the forum in a few different places where people are asking for an image to have a colour overlay on hover, however I'm looking for the opposite.

I've attached an example of my design and the effect I'm after. I'd like these (staff photos) on one section of the website to have a colour overlay, which disappears on the hover.

(Website for ref: https://findnorth.uk/home)

Thanks in advance 🙂

Thank you all for your super speedy replies! It's good to know if was still working for others if not for me/BT users. 

@paul2009 Bizarrely this was the issue! Both me and my client use BT as our provider in the UK. As soon as I replaced "assets" with "plugins" in the header code injection the filters all appeared again. Very strange, but so relieved this is working now. Thank you so much!

I also sent a to Squarespace as well requesting the product filters as a feature for commerce websites. Have been asking for this for years, but hopefully one day we'll get them.

Is anyone using the Universal Filter Plugin from Square Websites finding their code no longer works since the last Squarespace update, and the product filters have completely  vanished and been replaced with Squarespaces clunky product categories? I've tried removing and re-adding the code again but nothing is showing/working. This is occurring on both 7.0 and 7.1 websites.

Websites it has stopped working on:
https://www.giveadamngift.com/shop/
https://manorbarnorganics.com/shop

It's so disappointing that we've been screaming out for filters (price asc/des, newest, search bars etc) for commerce pages for years, and even paying for plugins like this, only for Squarespace to break them and still refuse to bring in these features.

Any help or feedback would be gratefully received. My clients are rightfully not happy (and right in the at the beginning of the Christmas sales period), so if anyone can suggest alternatives that still work too that would be amazing.

On 12/3/2022 at 2:04 PM, tuanphan said:

Use this CSS

@media screen and (max-width:991px) {
.header .customerAccountLoginDesktop {
    display: flex !important;
    position: relative;
    left: -10px;
}
}

 

Perfect, thanks again Tuanphan 🙂

1 hour ago, tuanphan said:

Add this to Design > Custom CSS

/* resize user icon on mobile */
.header-menu-nav-folder-content .user-accounts-text-link {
    background-position: center;
    background-size: 40px;
}

 

Thanks so much Tuanphan! 🙂 That's a much better size, but is there a way to move it so it sits alongside the shopping back in the top right?

Another question the topic of this website too if anyone can help - in the mobile version of the nav bad/menu the user icon appears giant at the bottom of the menu, is it possible to move this up alongside the shopping cart/bag icon like in previous versions of Squarespace?

2 hours ago, iamdavehart said:

you won't find "content:f290" because that is from font-awesome (an icon font). you've inserted a custom script to add a font-awesome icon. the script looks like this, and there will be a font-awesome link/script tag as well probably

<script>
  $(".Cart-inner").append("<i class='fa fa-shopping-bag' aria-hidden='true'></i>");
</script>

It will probably be in your site-wide code injection. The location of the script in your sites source is consistent with where squarespace puts site-wide injected footer code.

Go to settings > advanced > code injection

Amazing, thank you so much Dave! It was driving me bonkers trying to find where it was, but if it was a font that will be why. Managed to get it sorted now, thanks again for your help 🙂

15 minutes ago, Ziggy said:

Somewhere in your CSS you have this:

.fa-shopping-bag:before {
    content: "\f290";
}

Hi Ziggy, thanks for responding to this so quickly.

Is there a way of locating where this piece of CSS is? Have searched all custom fields and the only thing I can find is:

i.fa.fa-shopping-bag {
    font-size: 22px;
}

but when I delete this the black bag icon remains but shrinks in size. I can't locate the content: "content:f290"; part anywhere..

1 minute ago, Ziggy said:

Can you share the website URL?

Hi Ziggy, URL is https://www.giveadamngift.com/ thanks 🙂

There is currently the old shopping bag in the nav bar while I figure out how I can remove it before activating the new one.

I'm currently having an issue with my client's nav bar. Years ago when I set up their website, I must have added some custom css to display a shopping bag instead of a shopping cart in the top right of the nav bar. Now that there are multiple shopping cart/bag icons available to choose from on Squarespace I want to use a different default one from Squarespace. However when I select this and delete all the custom CSS from the custom CSS field, the old black bag icon still remains, so there are two bag icons. I've searched the Custom CSS fields, custom files folder, code injection fields, and page header code injection fields and cannot find where this icon is coming from. 

Any help would be great appreciated, thank you in advance.

10 minutes ago, IXStudio said:

Sorry I just seeing the "Login" text there.

Ah I see, sorry about that. The code Tuanphan gave above for the mobile icon undid the other code. I have removed this for now and the icons display properly. However I still need the login icon to appear in the mobile nav bar as in my earlier post. Can anyone please help?

Hi @IXStudio, the user account icon is currently in the top left next to shopping bag/cart icon on desktop, and at the bottom of the nav bar menu in mobile. Please see website here and above screenshots for reference.
Many thanks.

8 hours ago, tuanphan said:

#1. Icon is an image. You can't change it to custom color with code. You will need to download image to your pc, change its color with PTS, AI...then upload it to your site, then get image url, then add to this line

background-image: url(enter new image url here, see how to upload image & get image url: https://beaverhero.com/squarespace-how-to/#How_to_Upload_an_Image_Get_its_URL);

#2. Add to Design > Custom CSS

/* Login icon on mobile */
@media screen and (max-width:767px) {
.user-accounts-text-link {
    filter: invert(0);
    background-position: center;
}
}

 

Hi @tuanphan thanks for getting back to me so quickly.

I've inserted the new image following your helpful instructions, thanks 🙂

I'm having some trouble with the code for adding the customer account login icon into the mobile navigation bar. It's placing the account login icon in the mobile menu and not in the navigation bar. Please see the images attached of where this currently is and where I want it to go (essentially where Squarespace 7.0 used to place the icons in the mobile nav).
Please can you help?

5 hours ago, tuanphan said:

You want

• Change icon color on desktop
• Make it appear on mobile

Is this right?

Hi @tuanphan, yes that's correct 🙂 I want the icon to appear in both desktop and mobile and in the colour blue #4c7bb2 please

Site URL: https://www.giveadamngift.com/home

Hi, another Squarespace user here frustrated at not being able to customise the customer nav bar icon in 7.1 like we could for 7.0!

I found info in this previous post here about changing the 'login' text in the nav bar to an svg icon, and added the code below.

I'm currently trying to change the colour of this from white to #4c7bb2 and make it so the customer icon also appears in mobile view.

Can anyone please help?

/* Login text to icon */
.user-accounts-text-link span {
    color: transparent;
}

.user-accounts-text-link {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptNy43NTMgMTguMzA1Yy0uMjYxLS41ODYtLjc4OS0uOTkxLTEuODcxLTEuMjQxLTIuMjkzLS41MjktNC40MjgtLjk5My0zLjM5My0yLjk0NSAzLjE0NS01Ljk0Mi44MzMtOS4xMTktMi40ODktOS4xMTktMy4zODggMC01LjY0NCAzLjI5OS0yLjQ4OSA5LjExOSAxLjA2NiAxLjk2NC0xLjE0OCAyLjQyNy0zLjM5MyAyLjk0NS0xLjA4NC4yNS0xLjYwOC42NTgtMS44NjcgMS4yNDYtMS40MDUtMS43MjMtMi4yNTEtMy45MTktMi4yNTEtNi4zMSAwLTUuNTE0IDQuNDg2LTEwIDEwLTEwczEwIDQuNDg2IDEwIDEwYzAgMi4zODktLjg0NSA0LjU4My0yLjI0NyA2LjMwNXoiLz48L3N2Zz4=);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    filter: invert(1);
}

6 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Home summary */
div#block-yui_3_17_2_1_1574354436041_19694 .summary-item:first-child .summary-thumbnail-outer-container {
    visibility: hidden;
}

 

Amazing, thank you so much Tuanphan 🙂

Hi Tuanphan, no sorry, I only want to hide one thumbnail on the summary block so the rest will still show. 

E.g. in this image here I want the first thumbnail to be hidden but not the rest.

5 minutes ago, tuanphan said:

Add tag: hideit for the post. Then add this to Design > Custom CSS

/* hide posts belongs hideit tag */
section.BlogList article.tag-hideit {
    display: none !important;
}

 

Amazing, thank you so much Tuanphan! 
Is there anything I can add so that the thumbnail doesn't show on the summary block on the homepage too?
https://www.manorbarnorganics.com/

Thank you Tuanphan, it's https://www.manorbarnorganics.com/blog

On 12/9/2020 at 11:24 AM, tuanphan said:

Add to Home > Design > custom CSS

div#thumb-prophetic-heart-healing-basic-training {
    display: none;
}

 

Thanks for sharing this Tuanphan, really helpful 🙂 I'm looking to do the same for a blog post. Is it possible to hide a thumbnail on the blog, but still have it accessible from a URL to the post?