Crave Theme - Change outline colour of Image with Text template

[Cpilsner]

Hello - I’m trying to change the white boarder for the “Image with Text” box on the crave theme to a HEX formatted colour code. See attached image with the red arrow pointing to the border (shadow) portion I’m trying to change.

I don’t believe this is a simple colour configuration, so I’m hoping someone can provide me with a code snippet for the change. Thanks for your help.

[Moeed]

Hey @Cpilsner

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Cpilsner]

Hey Moeed - Yes the link is https://countrysfinest.ca/ and the pass is: sausage

Thanks for your help!

[Moeed]

Hey @Cpilsner

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

RESULT:

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

Best Regards,
Moeed

[Made4uo-Ribe]

Hi @Cpilsner

Just clarification you like to change the box-shadow below? Or the borders?

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

/* remove the box shadow */
.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after, 
.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item:after {
    box-shadow: none;
}

/* Change all the border colors */
.image-with-text__media.global-media-settings.media, .image-with-text__text-item .content-container {
    border-color: red;
}

And save.

Result:

If you like to change the box-shadow it uses rgba color.

Example:

.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after, 
.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item:after {
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.5); /* Red shadow */
}

And save.

Reuslt:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Cpilsner]

Thanks @Made4uo-Ribe Made4uo-Ribe - I was able to change the border colour but not the shadow. Here is the code I added to the bottom of the base.css file.

[Made4uo-Ribe]

You can add !important or replace with the code below.

.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after, 
.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item:after {
    box-shadow: 0 4px 10px rgba(219, 171, 48, 1) !important; /* GOLD shadow */
}

And save.

result:

If you like same shadow on the white before with yellow.

.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after, 
.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item:after {
    box-shadow: 0 6px 0px rgba(219, 171, 48, 1) !important; /* GOLD shadow */
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Cpilsner]

Thanks so much for your help @Made4uo-Ribe That is exactly what I was trying to accomplish. Appreciate it!