Changing Button in Dawn Theme - Creating Transparency

[ALJ]

My current buttons are white background with black type. I want the button background to be more transparent so one sees the image beneath vs a big white box. I have played with opacity and the Theme colors, but I am not finding a way to make the white more transparent/see-through. Your help would be appreciated!

[made4Uo · Accepted solution]

Hi @ALJ ,

1. Go to your Admin store > Online store > Themes > Click Actions > Edit code

2. Open the base.css file under your Asset folder. Then paste the code below

You can change the opacity from 0 to 1. 

.button.button--primary {
opacity: 0.5;
}

If you want to include the hover effect to have the opacity back to 1, just use the code below. 

  .button.button--primary {
    opacity: 0.5;
    transition: opacity .5s ease;
  }

  .button.button--primary:hover {
    opacity: 1;
  }

[Horlart_Expert]

You can check through your theme editor and go to theme settings where you will see color...

Check through the button color to make it transparent... If you need help kindly let me know

[ALJ]

I may be blind but I see nothing that refers to the word transparency for Accent 1 (used for solid button background). Where is that?

[made4Uo · Accepted solution]

Hi @ALJ ,

1. Go to your Admin store > Online store > Themes > Click Actions > Edit code

2. Open the base.css file under your Asset folder. Then paste the code below

You can change the opacity from 0 to 1. 

.button.button--primary {
opacity: 0.5;
}

If you want to include the hover effect to have the opacity back to 1, just use the code below. 

  .button.button--primary {
    opacity: 0.5;
    transition: opacity .5s ease;
  }

  .button.button--primary:hover {
    opacity: 1;
  }

[ALJ]

Excellent, that helped a lot!
I would like to remove that black pin line border around the button as well. Can you advise?

[made4Uo]

You can go to the theme editor. 

1. Go to Admin store > Online store > Customize

2. Open the theme setting located at the left bottom corner.  Then click buttons, to open the button customizer. See image below

3. Change the border thickness to zero and you can also use opacity to zero. See image

[ALJ]

These settings were already in place as described below and I’m still getting that pin line border.

[ALJ]

Thanks but I had those exact settings before, but still see the pin line border.

[made4Uo]

Try to add the code below. 

.button.button--primary {
border: none !important;
outline: none !important;
box-shadow: none !important;
}

It might be best to see you website url as well, if this code does not work 

[ALJ]

thank you

I did add this snippet to base.css and saved but didn't seem to change.

[made4Uo]

Can you provide your website?

[ALJ]

jonesflavors.com

[made4Uo]

I did try this before since it shows in your image but this is what I got when I search your website

[ALJ]

try vanillasoftheworld.com

[ALJ]

[ALJ]

OK. I fixed the domain name issue in the header. It now reads vanillasoftheworld.com.

Still can use your help with the very faint pin line border.

[made4Uo]

Hi @ALJ , 

Have you tried to make the setting of the button with no box-shadow?

You can also add this code below

.button.button--primary:hover {
border: none !important;
outline: none !important;
box-shadow: none !important;
}

[ALJ]

OK, thanks. I pasted that code in as well and also revisited button settings (see attached). Still see a faint border.

[made4Uo]

Hi @ALJ, 

Sorry about that. I did not look on the pseudo items. This should fix it.

.button.button--primary:before {
display: none !important
}

.button.button--primary:after{
display: none !important
}

[ALJ]

Hi there,

I have a follow up question for Dawn theme. Want to increase the font size of product prices (wherever they appear). Would one edit this existing language inTemplates, product.json 

"price": {
"type": "price",
"settings": {
}

or up in the Layout theme.liquid?

[made4Uo · Accepted solution]

You have to edit the code unfortunately.

1. In your Admin page, go to Online store > Themes

2. Choose the theme you want to edit then click Actions > Edit code. 

3. Open the base.css under the Asset folder. 

4. Add the code below. 

.price-item {
font-size: 40px !important;
}

[LAshton]

Hello, do you know how i would make the banner in banner columns the link without having a button?

[Freffles]

Where exactly should that code be pasted? There are a lot of lines in base.css.

[Horlart_Expert]

Press ctrl + F to search for button and paste it under it