New Shopify Certification now available: Liquid Storefronts for Theme Developers

Add white edging around Text

Solved
Regardez
Excursionist
17 0 3

Hello,

I'd like to add white edging around text on my image banner, to make it look more separated from the picture.

Link to my page: https://rightnowvintage.de/

I'm very grateful for help 🙂

Thank you

Accepted Solution (1)
JohnE10
Shopify Partner
89 10 13

This is an accepted solution.

The radius is for rounding the corners of the box, it doesn't change the size of it.


To change the size of the box, try adding the following line of code directly below the "border-radius: ...;" line:

 

padding: 8px;

 

 that should shrink the box around the text a bit and make it look like the image below:

Capture (1).PNG

As for the previous code, the "10px" value was too big for the text you have, "1px" would be the max for it.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com

View solution in original post

Replies 10 (10)
JohnE10
Shopify Partner
89 10 13

Hi,

 

Go to your store's dashboard:

  • Click "Online Store"
  • In the "Current theme" section, click the 3 dots next to the "Customize" button
  • Click "Edit code" in the context menu that pops up
  • Find the theme.liquid and add the following code:

 

<style>
 .banner__heading {
   -webkit-text-stroke: 1px #FF0000;
}
</style>

 

 

Change “1px” and "#FF0000" to the values that work best for you.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
Regardez
Excursionist
17 0 3

thank you very much, but this just makes the font thicker, I was looking so have some kind of a circle around the text to make it look like a button

JohnE10
Shopify Partner
89 10 13

No problem.

 

It should look like the image below, if it doesn't, upload an image of what it looks like, if you can, and I'll try to see what's up.

 

Capture.PNG

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
JohnE10
Shopify Partner
89 10 13

You mean like a background for the entire text?

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
JohnE10
Shopify Partner
89 10 13

Or if you just want an outline in a shape of a button around the text, then use this code instead, but be sure to place the code just above the closing head tag (</head>):

<style>
.banner__box {
  background: transparent;
  border: 2px solid #000;
  border-radius: 30px
}
.banner__heading {
    background: transparent;
}
</style>

Customize the border thickness and radius to your linking.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
Regardez
Excursionist
17 0 3

that's what I'm looking for - is it possible to make the radius smaller? because even with 0px it's too large?
Thank youBild 23.09.23 um 20.43.jpegBild 23.09.23 um 20.43 (1).jpeg
Also I'm uploading the pictures of what happened with the previous code:

JohnE10
Shopify Partner
89 10 13

This is an accepted solution.

The radius is for rounding the corners of the box, it doesn't change the size of it.


To change the size of the box, try adding the following line of code directly below the "border-radius: ...;" line:

 

padding: 8px;

 

 that should shrink the box around the text a bit and make it look like the image below:

Capture (1).PNG

As for the previous code, the "10px" value was too big for the text you have, "1px" would be the max for it.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
Regardez
Excursionist
17 0 3

I just implemented it, but it does not work 😞

JohnE10
Shopify Partner
89 10 13

You bet. Glad it helped.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
Regardez
Excursionist
17 0 3

Hey, Could you please have another look at it? It does not work

Thank you