Shopify themes, liquid, logos, and UX
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:
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!
Solved! Go to the solution
This is an accepted solution.
it is possiable but this some html and CSS code customization requird.
Thanks!
This is an accepted solution.
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;
}
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!
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
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;
}
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
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;
}
@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.
Thank you so far!
@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?
What do you want?
@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:
This is an accepted solution.
it is possiable but this some html and CSS code customization requird.
Thanks!
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
This is an accepted solution.
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;
}
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024