How can I modify the border color of a specific image without global changes?

Store Design
,

Topic summary

Issue: A user needs to change the border color of a single image to #A4E9EE on a specific page without affecting other images globally through the base.css file.

Solutions Proposed:

  • Taknify suggested using a specific CSS class selector to target only that image, providing a screenshot example with code like .color-background-2.isolate img { border: 4px solid #A4E9EE; }

  • dmwwebartisan recommended adding CSS targeting the specific page class: .wholesale-collagen .global-media-settings.isolate { border-color: #A4E9EE !important; }

  • oscprofessional offered a broader selector: .image-with-text__media.adapt-gradient.color-background-2.global-media-settings.media { border-color: #A4E9EE; }

Outcome: The original poster confirmed dmwwebartisan’s solution worked, as it specifically targeted only the intended image without creating global changes. The discussion reached resolution with a working, page-specific CSS implementation.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

How do I change the border colour of a particular image on one page without making global changes to the base.css file that will effect other images?

Page url is:

https://collagenstickz.com/pages/wholesale-collagen

Desired border colour is: #A4E9EE

Advice should change this image only and not affect other images from base settings.

2

Hello,

Please look at my screenshot.
You can select a specific class then add a border around the image. (One way of doing this)
Here is an example code:

.color-background-2.isolate img {
border:4px solid #A4E9EE;

}

Taknify_1-1688429311603.png
Taknify_1-1688429311603.png2704Ă—1374 620 KB

3

this image already has a border. I need to change it to #A4E9EE

4

I don’t see the image having any border color. Can you please send me a screenshot so I can better understand your issue?

5

@CollagenQueen

Please add the following CSS code to your assets/base.css bottom of the file.

.wholesale-collagen .isolate .global-media-settings {
    border-color: #A4E9EE !important;
}

Thanks!

1 Like
6

Hello @CollagenQueen

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media {
    border-color: #A4E9EE;
}
7

Won’t this put this border on every image with text on the website?

8

Thank you web Dmwartison for actually providing advice geared to my particular question and supplying code for that image only. Nice work!