Re: Add Border/Background of Text Section

rchristianson · ‎02-07-2024

Hi. I'm trying to see if it would be possible to add a black border around my text section. I want the background behind the text to remain the blue color, but the borders black. See example below. If any one can help, I would greatly appreciate it! Thanks!

ThePrimeWeb · ‎02-07-2024

Oh!! I misunderstood the requirement then.

Please delete all the code I've given you so far and replace it with this

<style>
section#shopify-section-template--14942274191423__rich_text_whJacC,
section#shopify-section-template--14942274191423__rich_text_whJacC > div {
    background: black;
}

.rich-text.content-container.color-background-1.gradient.section-template--14942274191423__rich_text_whJacC-padding {
    border-radius: 0 !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-07-2024

Hey @rchristianson,

Can I have the link to your store?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

rchristianson · ‎02-07-2024

Hi @ThePrimeWeb! I'm editing a draft website using the Refresh theme, so what I'm working on isn't live. Here's my web link, anyway.
https://manlieststuff.com/

ThePrimeWeb · ‎02-07-2024

Hey @rchristianson,

Can you share the preview link for the draft website?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

rchristianson · ‎02-07-2024

@ThePrimeWeb https://manlieststuff.com/?_ab=0&_fd=0&_sc=1

ThePrimeWeb · ‎02-07-2024

That's the live site again haha,

You should preview your theme and click Share Preview and send that link over.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

rchristianson · ‎02-07-2024

🙃my bad LOL. One more time:
https://1h7clh17cn8voi1w-5373001792.shopifypreview.com

ThePrimeWeb · ‎02-07-2024

Hey @rchristianson,

This will work for you, but a fair warning first. The black colour is barely visible. I suggest you try some other colours as well

Example, you really have to squint haha

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

Change both "#000" to other colours
4px is the border thickness, reduce or increase according to preference.

<style>
.rich-text.content-container.color-background-1.gradient.section-template--14942274191423__rich_text_whJacC-padding {
    border-left: 4px solid #000 !important;
    border-right: 4px solid #000 !important;
    border-radius: 0 !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

rchristianson · ‎02-07-2024

Thank you @ThePrimeWeb! That definitely worked in adding a black border, but I can't seem to get it to go the edges of the section. I tried playing with the border thickness vs radius, but it wasn't what I was envisioning. Perhaps it's user error lol

ThePrimeWeb · ‎02-07-2024

Hey @rchristianson,

If you want to change the radius, you need to add the measurement unit after the number
Example: "1000px".

"1000" by itself won't work because there's no measurement unit.

Only 0 works because zero means whatever unit it is, make sure it's nothing.

P.S. 1000 is way too high.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

rchristianson · ‎02-07-2024

Yeah, I did try keeping it at "0" radius, but can only get so thick w/ the border bc it starts looking like this:

this is 300x thickness.

I want to keep the size of the text box, just fill the edges in as black, like this: (red scribbles being black)

ThePrimeWeb · ‎02-07-2024

Oh!! I misunderstood the requirement then.

Please delete all the code I've given you so far and replace it with this

<style>
section#shopify-section-template--14942274191423__rich_text_whJacC,
section#shopify-section-template--14942274191423__rich_text_whJacC > div {
    background: black;
}

.rich-text.content-container.color-background-1.gradient.section-template--14942274191423__rich_text_whJacC-padding {
    border-radius: 0 !important;
}
</style>

Was I helpful?