Solved

Make standard theme buttons look a little better. Desperatly need you help

MDKSocks
Pathfinder
140 1 22

Help.jpg

 

So instead of photshopping fake buttons on images like I used to do I used the text overlay from my theme (District). Above you can see what I have made so far! BUT it doesn't look that awesome yet. I like the square buttons, I like the animation and I like the position. But I don't like the colors.

Is it possible to make them look like this:

Funnysokkenananas.jpg

This is what I used to have. I don't mind if it is square instead of round edges. But I would love the letters to be more bold and the box be completely yellow but transparent like the picture. (color code: #fbb03e) A litte more transparent is needed maybe because they are now in the middle?

I really hope I can make this work with the help of this awesome community!

Go sock yourself! -- https://mdksocks.nl
Accepted Solutions (2)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MDKSocks 

it is possiable but this some html and CSS code customization requird.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MDKSocks 

Try this code and remove previous code 

#shopify-section-1632401168fa1626a5 .box figcaption h4 {
    color: #000;
    border-radius: 48px!important;
    background-color: #fbb03eba!important;
    border: none !important;
    font-size: 27px !important;
    font-weight: bolder !important;
    font-family: inherit !important;
}

  

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 13 (13)

dmwwebartisan
Shopify Partner
12280 2546 3694

@MDKSocks 

 add the following code at the bottom of your assets/theme.scss.liquid

#shopify-section-1632401168fa1626a5 .box figcaption h4 {
    color: #000000;
    border-radius: 48px !important;
    background-color: #fbb03e !important;
    opacity: 0.8 !important;
    border: none !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MDKSocks
Pathfinder
140 1 22

You absolute hero!!!! This is even better then I thought!!

I have one addittional question tho:

How can I change text style? So maybe make it more bold? And also make it that opacity doesn't apply for text but only for the background? Basically want the background as it is now, but with the letters more clear and maybe more bold.

But thanks so far because this is great!!!

@dmwwebartisan 

Go sock yourself! -- https://mdksocks.nl
dmwwebartisan
Shopify Partner
12280 2546 3694

@MDKSocks 

Please remove previous css & add this 

 

#shopify-section-1632401168fa1626a5 .box figcaption h4 {
    color: #000;
    border-radius: 48px!important;
    background-color: rgb(251 176 62 / 86%)!important;
    border: none!important;
}

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MDKSocks
Pathfinder
140 1 22

Hey @dmwwebartisan 

If I do that my whole website get's white and messed up. Is it possible something went wrong or am I doing something wrong?

I also don't see text things in that CSS, but I only know basic stuff so it might still be there.

Thanks anyways mate, still appreciated! Hopefully we can make the letters bold and clear still

Go sock yourself! -- https://mdksocks.nl
dmwwebartisan
Shopify Partner
12280 2546 3694

@MDKSocks 

Please try this code 

#shopify-section-1632401168fa1626a5 .box figcaption h4 {
    color: #000;
    border-radius: 48px!important;
    background-color: rgb(251 176 62 / 86%)!important;
    border: none!important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MDKSocks
Pathfinder
140 1 22

@dmwwebartisan This is what I get if I paste that code:

I hope it is still possible to make the letters at least clear but maybe also bold.

 

Damn.jpg

Thank you so far!

Go sock yourself! -- https://mdksocks.nl
MDKSocks
Pathfinder
140 1 22

@dmwwebartisan I am really happy with it anyways mate! Thank you!

If you or someone has any idea how to not include the latters with the opacity that would be great tho!! And make them bold!

Text-style: bold; Maybe?

Go sock yourself! -- https://mdksocks.nl
dmwwebartisan
Shopify Partner
12280 2546 3694

@MDKSocks 

What do you want?

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MDKSocks
Pathfinder
140 1 22

@dmwwebartisan The letter to be opacity 100% while the rest stays as it is. I know it must be doable but I can't make it work.

And the letter bold(er) as well if possible.

So they look more like this: 

Funnysokkenananas.jpg

Go sock yourself! -- https://mdksocks.nl
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MDKSocks 

it is possiable but this some html and CSS code customization requird.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MDKSocks
Pathfinder
140 1 22

Ok so not really doable right now? That is ok if it is not!

What if we make the letters bold only then? That must be easy right? @dmwwebartisan 

That would be fine as well I think if the other is not possible

Go sock yourself! -- https://mdksocks.nl
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MDKSocks 

Try this code and remove previous code 

#shopify-section-1632401168fa1626a5 .box figcaption h4 {
    color: #000;
    border-radius: 48px!important;
    background-color: #fbb03eba!important;
    border: none !important;
    font-size: 27px !important;
    font-weight: bolder !important;
    font-family: inherit !important;
}

  

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MDKSocks
Pathfinder
140 1 22

Thank you mate! This will do fine!!!!

If someone has any idea how to make the letters 100% opacity but the background 80% let me know! But if it isn't possible this will do more than fine!

Go sock yourself! -- https://mdksocks.nl