Change Custom HTML border color

Solved
Excursionist
15 0 1

Hello, 

I currently have the problem that custom HTML textboxes on my homepage have a white border (as seen in the picture), how can I change it to match the color of my page background?example.PNG

0 Likes
Shopify Expert
337 24 61

You can change the color with CSS:

 

1. Use Chrome Dev Tools and "inspect" the element to find which CSS class/ID controls the element.

 

2. Edit the border property right there in the browser to get the desired color/size you want. It's probably either border or border-color.

 

3. Add the CSS block to the end of your existing stylesheet. If you don't have a custom stylesheet yet I would create a custom.scss.liquid, then include that in your theme.liquid file after your theme's css file (to see how to include, just copy the code from your theme's css include statement in theme.liquid, and change the filename).

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Order Automator (app that auto fulfills orders, adds tags, emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
1 Like
Excursionist
15 0 1

Thanks for your reply, I checked the element with Google Chrome and found it was defined not by the border but by the padding. The attribute I had to change for this was .section-block--padding. Where can I find this in my shops code?

0 Likes
Highlighted
Shopify Expert
337 24 61

Ok in that case you'll want to add this CSS:

 

#element {
  border: 1px solid red;
}

- change element with the ID of that particular element. If you apply to the class you mentioned, that will likely add it to other elements.

- change red to whatever color you want (you can use hex colors too).

 

Add that to your custom CSS file (or create one) and it will overwrite the original theme styling.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Order Automator (app that auto fulfills orders, adds tags, emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
1 Like
Excursionist
15 0 1

Where can I check the ID of the element? Sorry for the stupid question, Im not very experienced yet.

0 Likes
Explorer
55 5 7

Can you share your store url? I can tell you what to use for the css

Tender - Shopify Theme Design/Development Group
techdevcrazy@gmail.com
1 Like
Excursionist
15 0 1

ehre-official.de

0 Likes

Success.

Explorer
55 5 7

.index-section .custom-content {

  background-color: #c8e9e9;

}

Add this to your custom css file

Tender - Shopify Theme Design/Development Group
techdevcrazy@gmail.com
1 Like
Excursionist
15 0 1

This fixed the problem, thanks a lot!

1 Like