Re: Add Border/Background of Text Section

Solved

How can I add a black border to my text section?

rchristianson
Excursionist
14 1 3

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!

 

christianson_0-1707337421778.png

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 506

This is an accepted solution.

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

Replies 12 (12)

ThePrimeWeb
Shopify Partner
2139 616 506

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
Excursionist
14 1 3

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
Shopify Partner
2139 616 506

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!
ThePrimeWeb
Shopify Partner
2139 616 506

That's the live site again haha,

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

ThePrimeWeb_0-1707342397867.png

 

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
Excursionist
14 1 3
ThePrimeWeb
Shopify Partner
2139 616 506

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

ThePrimeWeb_0-1707343152580.png

 

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.

ThePrimeWeb_1-1707343214203.jpeg

 

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
Excursionist
14 1 3

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
Shopify Partner
2139 616 506

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
Excursionist
14 1 3

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

rchristianson_0-1707345594610.png

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)

rchristianson_1-1707345650999.png

 

ThePrimeWeb
Shopify Partner
2139 616 506

This is an accepted solution.

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!
rchristianson
Excursionist
14 1 3

That worked flawlessly! Thank you SO much @ThePrimeWeb!!🔥