Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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>
Hey @rchristianson,
Can I have the link to your store?
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/
Hey @rchristianson,
Can you share the preview link for the draft website?
That's the live site again haha,
You should preview your theme and click Share Preview and send that link over.
🙃my bad LOL. One more time:
https://1h7clh17cn8voi1w-5373001792.shopifypreview.com
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.
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
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.
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)
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>
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024