To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Border around buttons - Brooklyn Theme

Solved
Haarlem_House
Excursionist
13 0 7

Hello - I can't seem to figure out how to put a simple border around all my buttons (on all pages) in Brooklyn theme. I want a simple black border/outline (1 px?) around a white button so it pops off a white background. I have very little coding experience, but I've had good experience cutting and pasting code from message boards in the past.... Kind thanks in advance!

Accepted Solution (1)

Accepted Solutions
JoesIdeas
Shopify Expert
1764 154 459

This is an accepted solution.

Here's the approach I take to edit CSS on a site:

 

1) Use chrome dev tools inspector (on mac it's CMD + Shift + C) to find the ID / class of the element you want to change, in this case your button.

 

2) If you don't have a custom css file yet, create one by adding an asset custom.scss.liquid, then call it in your theme.liquid file after your theme's css file like this: {{ 'custom.scss.css' | asset_url | stylesheet_tag }}

 

3) Add the css to that file, example:

.button-class {
  border: 1px solid #000;
  background: #fff;
  color: #000;
}

 

 

• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people

View solution in original post

Replies 4 (4)
JoesIdeas
Shopify Expert
1764 154 459

This is an accepted solution.

Here's the approach I take to edit CSS on a site:

 

1) Use chrome dev tools inspector (on mac it's CMD + Shift + C) to find the ID / class of the element you want to change, in this case your button.

 

2) If you don't have a custom css file yet, create one by adding an asset custom.scss.liquid, then call it in your theme.liquid file after your theme's css file like this: {{ 'custom.scss.css' | asset_url | stylesheet_tag }}

 

3) Add the css to that file, example:

.button-class {
  border: 1px solid #000;
  background: #fff;
  color: #000;
}

 

 

• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Haarlem_House
Excursionist
13 0 7

Done and done. Exactly what I wanted - thank you so much!


Jed

mwuahlauren
New Member
1 0 0

Hi!

Do you know where to place this code when using MOTION - theme? 

 

mattpark
New Member
1 0 0

Hi, do you know how I can do this, but for Presitge theme? My website is technicalfallbrand.com