Red_Dot_Design
Circle Member-
Posts
38 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Red_Dot_Design
-
My client has updated lots of pages on her site and now when some of the pages load (for example this one: https://www.nikihutchison.com/master-your-marketing) there are background colours appearing as they load, before the new colours settle into place. Can anyone explain why this might be happening? Thanks, Tara
-
Ah I did! I've removed the image swap code and that fixed it. You're fab, thanks so much!
- 11 replies
-
- images
- code-injection
-
(and 3 more)
Tagged with:
-
Thank you, that fixed the image shifting issue and the overlay on hover looks great! 😊 The attached is what I see when it's on a mobile/tablet device (the text shows under the image instead of on hover). Is there anyway to fix this so it has the colour and title overlay as per the desktop version?
- 11 replies
-
- images
- code-injection
-
(and 3 more)
Tagged with:
-
Would you be able to give me the code for adding a link and colour + title overlay to an image block?
- 11 replies
-
- images
- code-injection
-
(and 3 more)
Tagged with:
-
I've just checked this and yes the same thing happens.
- 11 replies
-
- images
- code-injection
-
(and 3 more)
Tagged with:
-
I got the code from here: https://originalbox.co/blog/squarespace-image-hover-effect You'll need to scroll halfway down the page to find the section titled, "Squarespace Image Change on Hover"
- 11 replies
-
- images
- code-injection
-
(and 3 more)
Tagged with:
-
Hello, For my sites homepage, I have created an image swap using custom CSS and code blocks. The intention of this was to replicate a title and colour opacity on hover. This function is currently not available on image blocks which is why I did it this way. This works well on desktop (screenshot attached) but on mobile it appears as per the other screenshot. My site and password: https://gopher-tomato-twpa.squarespace.com/ Password: hello The code I have used is here: //image change on hover// .image-swap { opacity: 1; max-width: 600px; /* adjust widths */ height: auto; /* adjust height */ position: relative; } .image-swap img { width: 100%; transition: all 0.2s ease; } .hovered { opacity: 0; position: absolute; left: 0; } .image-swap:hover .hovered { opacity: 1; } Thank you,
- 11 replies
-
- images
- code-injection
-
(and 3 more)
Tagged with:
-
Show Text Before Hover On Mobile Device
Red_Dot_Design replied to ryan_ball's topic in Customize with code
Hello! I also need help with this. My portfolio images (screenshot attached) work fine with overlay on hover on desktop, but the colour overlay and title disappears when on mobile. Is it possible to have these appear with some custom code? I can upgrade to business plan if it requires Javascript. Alternatively if this is not possible, please can I have the code for the title to appear under the image on mobile? My site is here: https://gopher-tomato-twpa.squarespace.com/portfolio password: hello Thanks. -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
Ok, thanks for all your help anyway. If you can think of another way of setting it up where the link would still work, let me know. -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
Thanks! That's it all fixed aesthetically but now when I try to click on each box it no longer takes me to the linked page. If I remove the code the links seem to work fine. -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
Thank you! 😊 That helped fixed the colour overlay but the text is still sitting at the bottom instead of in the middle of the box? -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
Hi Ziggy, I've moved this onto a new site and I am having a few problems. Firstly, I've added the exact code in the solution above but what happens is as per the attached screenshot titled "Overlay example". Would you be able to have a look and let me know how to adjust the code so the overlay colour covers the photo completely and the text is completely centre aligned? My new site is at: https://gopher-tomato-twpa.squarespace.com/ Password: hello Thanks, Tara -
Hi Tuanphan, Website link here: https://elk-tuna-ztlx.squarespace.com/ Password: hello Thank you.
- 4 replies
-
- supply-template
- css
-
(and 3 more)
Tagged with:
-
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
That's done it! Thank you. -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
Thank you, that's much closer but it's still sitting to the left (see screenshot) is there a way to centre it completely? -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
I've removed everything and re-added the code and it's working again! The only question left is how do I center the overlay text within the box and style it? Thank you. -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
I didn't remove it no - it just suddenly stopped working. -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
So that has kind of worked but now its sitting above and below the image by too much (see attached screenshot). Is there a fix for this? -
How to achieve custom colour overlay on inline images
Red_Dot_Design replied to Red_Dot_Design's topic in Customize with code
This is the code I've used to get it to what you see in the screenshot: .sqs-block.image-block { padding: 0; margin: 10px; } .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper { background: #515b64; opacity: 80%; width: 100%; height: 100%; } Website link here: https://elk-tuna-ztlx.squarespace.com/ Password: hello -
How can I edit my code so that in the attached screenshot: The colour overlay (on hover) covers the image perfectly The overlay text sits middle centre Many thanks Tara
-
Is there anyway to adjust the Supply template so that I can have full bleed homepage images? I want something that looks like the website screenshot attached. Furthermore, how can I adjust the website margins on all the pages? Thank you.
- 4 replies
-
- supply-template
- css
-
(and 3 more)
Tagged with:
-
Created a site a year ago where the client was offering their customers memberships to buy. The client didn't want to pay the extra per month for a Members Area, so I set set up memberships to buy through a commerce store instead (see Screenshot 1). If you look at Screenshot 2 attached you can see there are quite a few customers who purchased these memberships. Now the problem is that the client wants an actual membership area. Is there a way for me to move all the customers (who have technically already bought memberships) into the new membership area? If this isn't technically possible, what would be the best way for me to make this transition manually? An email sent to current commerce customers?
- 2 replies
-
- commerce
- customer-accounts
-
(and 2 more)
Tagged with:
-
Hi Paul, thanks so much for this! In that case it looks like I need to add an age gate separately. Would you be able to advise how to do this or do you know of any relevant plugins?
- 10 replies
-
- cover-page
- homepage
-
(and 1 more)
Tagged with: