Debut theme - Image with text overlay section - Button customisation

Solved
Highlighted
New Member
19 0 1

Hi everyone, 

I'm very new to this and i'm trying to change the appearance on the button on the 'Image with text overlay' section of the Debut theme.  I have gone into theme settings and adjusted the colours from there but that only gives me a background colour when I hover over the button.  

I would like to adjust the button as such:

- give the button a permanent background colour so that it is visible against my image

- adjust the size of the button

- adjust the size of the buttons font

- adjust the font colour 

I guess i would do this in theme.css??  But i'm not sure what code to add / change. 

Any help with this would be greatly appreciated.  Thank you. 

https://little-trip-design.myshopify.com

Screenshot 2020-11-22 at 07.56.28.pngScreenshot 2020-11-22 at 07.57.03.pngScreenshot 2020-11-22 at 07.57.09.png

0 Likes
Highlighted
Shopify Partner
151 22 23

Hi @MandyLT,

You can add code in theme.scss.liquid at the end.

Go to Online Store -> Themes -> Actions -> Edit code -> Assets -> theme.scss.liquid

.hero .btn.hero__btn {
       background-color: #dc3939;
      color: #ffffff;
     font-size: 18px;
If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
0 Likes
Highlighted

hi @MandyLT 

You can add code in theme.scss.liquid at the bottom.

Follow this : Online Store >> Themes >> Actions >> Edit code >> Assets >> theme.scss.liquid

 

.hero .btn.hero__btn {
       background-color: #000000;
      color: #ffffff;
     font-size: 16px;
}

 

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on parth.bhut43@outlook.com
0 Likes
Highlighted
New Member
19 0 1

Hello, thank you both very much for your responses.  Unfortunately neither of them worked.  I'm not sure what i'm doing wrong??  I entered the code at the end of the theme .css as per the screenshots below, but when i refreshed my shop page the button hadn't changed at all.  I tried clearing the cache and restarting the computer but that didn't help.  Can you tell what I'm doing wrong from the screenshots provided please?? Thanks in advance. 

Screenshot 2020-11-22 at 12.37.25.pngScreenshot 2020-11-22 at 12.38.14.pngScreenshot 2020-11-22 at 12.38.29.png

0 Likes
Highlighted
Shopify Partner
151 22 23

Hi @MandyLT,

Your store is password protected.

Pls share your store frontend password so I can check it properly.

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
0 Likes
Highlighted
New Member
19 0 1

Hi, I've sent a message with password.  Thanks. 

0 Likes
Highlighted
Shopify Partner
151 22 23

This is an accepted solution.

Hi @MandyLT 

Curly  bracket missing in media query code

Add this Curly  bracket {  at the end of media query 

I have given some code. pls check it 

@media screen and (max-width: 749px) {
  #PageContainer {
   padding-top: 70px;
}
}

 

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
1 Like
Highlighted
New Member
19 0 1

It worked!!  Thank you so much      This has made my day   

0 Likes
Highlighted
New Member
19 0 1

Hi,

following on from my earlier query - is there a way for the button to still have padding around the font when viewed on mobile version please?  It currently looks a bit squeezy.  Perhaps the font size needs to be relative to the box size??  Mobile view below. 

Thanks in advance  

 

Screenshot 2020-11-22 at 16.53.15.png  

0 Likes
Highlighted
Shopify Partner
151 22 23

This is an accepted solution.

Hi @MandyLT 

Pls add padding or replace last code with this

 

 

.hero .btn.hero__btn {
       background-color: #000000;
      color: #ffffff;
      font-size: 16px;
      font-weight: bold;
      font-family: HelveticaNeue;
      padding: 12px 18px;
}

 

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
1 Like