0
347
ViewsCómo aplicar estilo al texto product-template.liquid y poner un óvalo alrededor dependiendo de la longitud del texto Shopify
Estoy usando el tema de prestigio y quiero diseñar mi 'Reabastecido' como lo ven con 'Best Seller' que tiene el óvalo alrededor y una sombra si es posible. A continuación se muestra lo que tengo en product-template.liquid y estoy tratando de que el óvalo se autodimensione con el texto y tenga un poco de relleno a los lados y en la parte superior e inferior del texto, al igual que la imagen de ' Mejor vendido'. ¿Alguna idea de como hacerlo?
<div class="Product__InfoWrapper"> <div class="Product__Info {% if image_count == 0 %}Product__Info--noGallery{% endif %}"> <div class="Container"> {% if product.tags contains "new-badge" %} NEW PRODUCT {% elsif product.tags contains 'restocked' %} RESTOCKED {% elsif product.tags contains 'best-seller' %} BEST SELLER {% elsif product.tags contains 'selling-fast' %} SELLING FAST {% endif %} {%- render 'product-meta', product: product, show_description: true -%} {%- if product.template_suffix != 'coming-soon' -%} {%- render 'product-form', product: product -%} {%- endif -%} lo que tengo actualmente 
Lo que quiero 
·
Juan Pablo Isaza
2 answers
Answer question0
Prueba este código. Utilice su estilo de fuente y color de borde.
<body> <div style="text-align: center"> <p style=" border: 2px solid rgba(68, 66, 66, 0.473); border-radius: 300px; padding: 10px; width: 190px; font-size: 22px; font-weight: 900; " > RESTOCKED </p> </div> </body>
·
Juan Pablo Isaza
Report
0
Esto resolverá su problema de cambio de tamaño automático según el tamaño de la fuente.
<!DOCTYPE html> <html lang="en"> <head> <title>Button style</title> </head> <body> <div style="text-align: center"> <button style=" border: 2px solid rgba(68, 66, 66, 0.473); border-radius: 300px; padding: 10px; padding-left: 20px; padding-right: 20px; font-size: 22px; font-weight: 900; " > RESTOCKED </button> </div> </body> </html>
·
Juan Pablo Isaza
Report
Answer question