Trying to get border color of image with text to match the background

Store Design
1

Absolutely useless at coding and not quite sure how to do this
https://greenroomcoffee.myshopify.com

In the about green room section Im trying to get it to match the rest of the green background

1 Like
2

Hey @greenroomcoffee

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

Moeed_0-1688733079639.png
Moeed_0-1688733079639.png1900Ă—934 115 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @greenroomcoffee ,

I just like to clear you like to put border in the Image with text with same color on the background of it? If it that so try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet {
     border: 5px solid #4f8b78;
    border-radius: 1.5%;
}

Result:

Ribe_Dagandara_0-1688733225181.png
Ribe_Dagandara_0-1688733225181.png1159Ă—502 74.7 KB

I make thicker border so it wouldl be visible. but you can increase or decrease it.

I hope it help.

4

Hello @greenroomcoffee

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.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__media img {
    border: 4px solid #4f8b78;
}
5

Thank you so so much! Worked a treat and your instructions were so clear and useful!