thesoulfulentrepreneur

@tuanphan ohhhh got it - thank you! that worked 🙂

Hello @tuanphan - I'm back, sometime later, with another dilemma related to these gold frames. This time, it's with the first testimonial block which you will find here. I am able to add the gold border, however, when I add the padding value - the result looks like this: This is the code without the padding value: #collection-6452ac9c917bdf36311b4be3 { .user-items-list-carousel__slide { flex-direction: row !important; } .user-items-list-carousel__media-container { width: 30% !important; margin-right: 50px; } .user-items-list-carousel__media { width: 100% !important; } } section[data-section-id="6452aca66bb4183fdbf6d4da"] .user-items-list-carousel__media-inner { overflow: visible !important; border: 1px solid #d1a556; } Do you have any idea what we might be missing? Thank you!

Thank you very much @tuanphan - I so greatly appreciate your support. I had to add !important to the border property but, it did the trick! 🙂

@aadmint2021 @Bmosello @taylorlaidlaw were any of you able to make it so that the counter starts when you scroll to that section instead of upon page load? @taylorlaidlaw I took a peek at the site you linked to and it looks like you did. If you are able to share the solution, I'd greatly appreciate it as I too am stuck with the same challenge 🙂

@tuanphan thank you! that does the trick. yes correct, that image.

@tuanphan thank you - that worked 🙂 The good news, mostly everything has been addressed. Just this remains: Circular Boders Is it possible to apply the frames with padding to images in testimonial slider blocks? For an example, please refer to the home page, under the 'our clients' block. I tried the following code: However, the issue arises with padding: since we use the Fluid editor to crop the images in Squarespace, so the original images are actually square. Is there a code solution for this or would it be better for us to upload the images as circles? Arch Borders On a somewhat similar note, is it possible to add gold frames to arch shaped images? For example, like the first image on this page. Thank you!

@tuanphan thank you 🙂 generally speaking, this solved almost all issues. I noticed one small thing. On the tools page: https://www.thesoulful.squarespace.com/tools, I applied the following code to remove the frames from the logos: Prior to doing so, I noticed that the Flodesk logo is cut off, along the bottom. I believe it's due to this code, from the solution above: because when I remove it, it's fine. Any thoughts on what to do here? Would it be easiest if we just manipulate the img file to add more white space around it?

@tuanphan ah ok, thank you - that makes sense in cases where I want to remove frames from all images in a section. With the top section images, I'm referring to the first image on this page, for example: https://thesoulful.squarespace.com/pre-made-brands-websites (there are a few other pages, like this, where the top image already has a custom frame that's more complex than just a border). Another example of a 'specific' image that I may want to remove a frame from is the scrolling desktop mockups that you see in the 'our identities' section. So in those situations, what's the best way to target a single image? Would it be like this (this is for the first image on the above referenced page)? #block-632883d2f88d78b13986a0e0 .fluid-image-container { border: none !important; }

@tuanphan Oh amazing, I adjusted the code for the first 3 and that did the trick. I'll work on the rest. THANK YOU!! 😄

@tuanphan thank you very much. i have added it. the good news, it seems to solve one part of the problem noted above. the other, about how to not target some images, still remains. here are a couple of examples: - the logos on this page: https://thesoulful.squarespace.com/tools. - the header images on pages like this: https://thesoulful.squarespace.com/about. is there any way to exclude images?

@tuanphan the images on this page, under the scrolling text. before, on hover, each image would reveal a picture of the client. now, it reveals a blank spot.

Site URL: https://www.thesoulful.squarespace.com Hello! Site URL: https://www.thesoulful.squarespace.com Pass: livesoulfully I am interested in using CSS to apply borders to the images on a website as efficiently as possible. I referenced the solutions in this thread, however, none seemed to do the trick: I got seemingly close with this: .sqs-block-image { border: 1px solid #d1a556 !important; padding: 10px !important; } However, two issues arise: 1. There are several images I do not wish to target. I assume that requires us to get more specific with targeting, like using the section ID, like this (this is for the home header): section[data-section-id="6328d3a483fd37bbf384a8f6"] .sqs-block-image { border: 1px solid #d1a556 !important; padding: 10px !important; } 2. In some cases, the padding doesn't apply evenly, for example, there may be more/less padding on the top/bottom of the image depending on the screen width. I have attached some examples for visual reference. I tried to solve this by switching the design setting of the image block from 'fit' to 'fill', but that introduces other proportion-related issues across screen sizes, which I'd like to avoid. Does anyone have any thoughts as to how to implement? Thanks in advance!

Hi @tuanphan - I recently updated this site to the fluid engine and, unfortunately the code no longer works. To access the page, the URL is: https://thesoulful.squarespace.com/. Pass: livesoulfully. I tried to update the section/block IDs but, no luck. Example: section[data-section-id="6329d15529842ea4bc52ac3a"] { .image-block a { background-size: cover; background-repeat: no-repeat; background-position: center center; transition: all 0.3s; } .image-block a { transition: all 0.3s; } .image-block:hover img { opacity: 0; }} div#block-6329d1552b4ffbc375724bdf:hover a { background-image: url(https://static1.squarespace.com/static/6226283dbb8c047be0806024/t/62c46b18d7ade732c875219b/1658252999585/COVER_portfolio_yaxkin.jpg); } Does it have something to do with the image block classes changing on the Fluid Engine? Thanks!

@tuanphan yes absolutely, https://www.thegroundedspirit.co/sessions

Site URL: https://www.thegroundedspirit.co/connect Hi! I'm woking on a Squarespace website and for whatever reason, the font weight on the contact page does not align with the rest of the website. It is heavier for h4, p2 and button styles than on the rest of the site and I cannot figure out why. All I can see is that on initial page load, it is fine, but then it changes. I have attached an example of the h4/p2 style on the sessions page versus the connect page. Does anyone have any ideas on why this may be happening? Thanks in advance!

@tuanphan yes! that did the trick 🙂 thank you!! so if I want to apply the same for the section beneath the 'highlighted' clients, is it correct to update the first portion of the code as follows (in addition to customizing the rest of the code for each unique image)? div#page-section-6229356fbf842170a3f16127, div#page-section-627e96382f00f74bc41b4500 { .image-block a { background-size: cover; background-repeat: no-repeat; background-position: center center; transition: all 0.3s; }

@tuanphan thank you very much for the reply and suggestion. i applied the code and it works for the first image, but not for the other two examples you added. i double checked the IDs and unless I'm missing something all seems to be ok. any idea as to what might be happening?

Yes, for the image blocks above and below the scrolling block I would like to implement it so that a unique image appears for each image, on hover (the image will be a headshot of the client).

Hi @bangank36 - sorry for incredibly prolonged reply. We put that project on pause and I wasn't able to test it out. We have restarted and decided to change the implementation approach. We are no longer using a blog page. Instead, we simply added each image to a regular page as an image block and linked it to the corresponding portfolio page. While what you have shared above seems like it should work - for whatever reason, I cannot seem to get the correct ID/class combo to get the 'after' image to appear. The updated link to the page is here (pass: soulfullife). Thanks in advance for your guidance! I truly appreciate it.

@bangank36 yes, exactly 🙂

Site URL: https://www.thesoulfulentrepreneur.ca/clients Hello, I know that it is possible to change an image on hover using custom code blocks; however, is it possible to do so for blog cover images? The page I'm interested in doing this for is here. Ideally, I'd love to change each image to an image of the client upon hover. If not, I realize that a workaround would be to set up a new page with custom code where each image is added as a code block and links to the corresponding blog page. However, I thought I'd investigate whether the above approach is possible before doing so. Thanks in advance for your help!

@tuanphan my apologies, in the meantime I answered my own question. thanks for your support!

@tuanphan ah ok. thank you - that does work. so to clarify, it is not possible to change to colour on hover for individual images? like if I wanted to apply this to the resources page, for example?

@tuanphan I'm trying to apply the same for a background image, but for some weird reason - while the initial grayscale code works, the hover state does not work. I'm testing on the header image. URL: https://www.leadwithbliss.squarespace.com Pass: leadwithbliss Code: .section-background img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .section-background img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); } But when I use the inspector and force the hover state, it works (see attachment). Any ideas as to why this might be?

@tuanphan my apologies for the delayed response. i tried this but, unfortunately it did not work. Please refer to the screenshot. I now have 3 columns in the design, rather than 2, so I'm not sure if that's influencing the result?