Jump to content

Image borders on Fluid Engine

Go to solution Solved by tuanphan,

Recommended Posts

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!

Screen Shot 2022-10-17 at 1.17.49 PM.png

Screen Shot 2022-10-17 at 1.18.06 PM.png

Edited by stellaehabib
Added additional details for further clarity
Link to comment
On 10/20/2022 at 12:47 PM, thesoulfulentrepreneur said:

@tuanphan  🙂 just image blocks.

the challenge is, on some pages, it will not be all image blocks. for example, let's take the home page. that's an instance where all image blocks will have frames. comparatively, if you visit a client page, like this, i'm looking to add it to just the header and laptop mockup with the scrolling website. or the tools page, like this, i'm looking to add it to just the header - not the logo images.

Try adding this to Design > Custom CSS

/* Image frame */
.fluid-image-container, .sqs-video-wrapper {
    border: 3px double black;
}
.sqs-image, .sqs-image div {
  overflow: visible;
}
.image-block .content-fill, .image-block .content-fit, .content-fit img {
    width: calc(~"100% - 10px") !important;
    height: calc(~"100% - 10px") !important;
    top: 5px !important;
    left: 5px !important;
}
.content-fit img {
    object-fit: cover !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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? 

Edited by thesoulfulentrepreneur
updated to remove some content
Link to comment
On 10/22/2022 at 10:30 PM, thesoulfulentrepreneur said:

@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? 

You want to remove code on images on these pages or? If remove, use this code

/* remove images border */
/* tools */
.fe-6324cd03f1e6fc893fae5f01 * {
    border: none !important;
}

With about, you mean top section images?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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;
}

 

Link to comment
On 10/26/2022 at 10:39 AM, thesoulfulentrepreneur said:

@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;
}

 

You can use some code like this

#block-id * {
    border: none !important;
}

Use this tool to find block id 

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

@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:

Quote

section[data-section-id="6324cd0347714e92a18a1541"] .fluid-image-container {
    border: none !important;
}

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:

Quote

.image-block .content-fill, .image-block .content-fit, .content-fit img {
    width: calc(~"100% - 20px") !important;
    height: calc(~"100% - 20px") !important;
    top: 10px !important;
    left: 10px !important;
}

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? 

Link to comment

@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:

Quote

 

.user-items-list-carousel__media-inner {

    border: 1px solid black;

}

 

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!

Edited by thesoulfulentrepreneur
Added one more question
Link to comment

First, try using square images

Next, use this CSS

.user-items-list-carousel__media-inner {
    overflow: visible !important;
    border: 1px solid red;
    padding: 5px !important;
    height: auto !important;
    border-radius: 50% !important;
}
.user-items-list-carousel__media-inner img {
    border-radius: 50%;
    position: static !important;
}

image.thumb.png.63432e0de9a51ed67dcdf55490552e3f.png

For this image?

image.png.7b7621d8db9e1def3d4eed0eefc115fd.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/9/2022 at 10:38 PM, thesoulfulentrepreneur said:

@tuanphan thank you! that does the trick.

yes correct, that image. 

I think you should use a normal image, then we will use CSS to make curve on top left top right corners.

I did an example with image at bottom of page'

image.thumb.png.5298adbf8894d6892e62cbf5496d1cfd.png

div#block-efff2a01b90cc35816e9 .image-block-wrapper {
    border: 1px solid #d1a556;
    padding: 10px;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}
div#block-efff2a01b90cc35816e9 img {
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/11/2022 at 1:31 AM, tuanphan said:

I think you should use a normal image, then we will use CSS to make curve on top left top right corners.

I did an example with image at bottom of page'

image.thumb.png.5298adbf8894d6892e62cbf5496d1cfd.png

div#block-efff2a01b90cc35816e9 .image-block-wrapper {
    border: 1px solid #d1a556;
    padding: 10px;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}
div#block-efff2a01b90cc35816e9 img {
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}

 

This is fantastic @tuanphan I've been going round and round trying to give a border to image shapes that don't end up a square around an oval -impossible! This is a great workaround. Many thanks for posting.

Link to comment
On 11/10/2022 at 8:31 PM, tuanphan said:

I think you should use a normal image, then we will use CSS to make curve on top left top right corners.

I did an example with image at bottom of page'

image.thumb.png.5298adbf8894d6892e62cbf5496d1cfd.png

div#block-efff2a01b90cc35816e9 .image-block-wrapper {
    border: 1px solid #d1a556;
    padding: 10px;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}
div#block-efff2a01b90cc35816e9 img {
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}

 

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

Link to comment
  • 8 months later...

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: 

image.thumb.png.2c0832f11f4f8230dc9f2ea50ebc37ae.png

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!

Link to comment
  • Solution

Use this CSS to add space inside image. This code will change width to 100% - 8px, height to 100% - 8px, then move image to right 4px (so it will have left/right space = 4px), and move down 4px (so top/bottom space = 4px)

#collection-6452ac9c917bdf36311b4be3 section[data-section-id="6452aca66bb4183fdbf6d4da"] .user-items-list-carousel__media-inner img {
    width: calc(~"100% - 8px") !important;
    height: calc(~"100% - 8px") !important;
    left: 4px !important;
    top: 4px !important;
}

image.thumb.png.36ee2e28e413cd77cc7b8741692c3f6d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.