Solved

Add Border/Background of Text Section

rchristianson
Excursionist
13 1 1

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
1156 299 229

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

View solution in original post

Replies 12 (12)

ThePrimeWeb
Shopify Partner
1156 299 229

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
rchristianson
Excursionist
13 1 1

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
1156 299 229

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
ThePrimeWeb
Shopify Partner
1156 299 229

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
rchristianson
Excursionist
13 1 1
ThePrimeWeb
Shopify Partner
1156 299 229

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
rchristianson
Excursionist
13 1 1

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
1156 299 229

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
rchristianson
Excursionist
13 1 1

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
1156 299 229

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
rchristianson
Excursionist
13 1 1

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