如何设置文本 product-template.liquid 的样式并根据文本长度放置一个椭圆形 Shopify
How to style text product-template.liquid and put an oval around depending on text length Shopify
我正在使用声望主题,我希望我的 'Restocked' 风格像您看到的那样 'Best Seller' 周围有椭圆形,如果可能的话还有阴影。下面是我在 product-template.liquid 中的内容,我试图让椭圆自动调整文本大小,并在文本的两侧和顶部和底部填充一些,就像图片一样'best seller'。知道如何做到这一点吗?
<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 -%}
我目前拥有的
我想要什么
试试这个代码。
使用您的字体样式和边框颜色。
<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>
这将解决您根据字体大小自动调整大小的问题。
<!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>
我正在使用声望主题,我希望我的 'Restocked' 风格像您看到的那样 'Best Seller' 周围有椭圆形,如果可能的话还有阴影。下面是我在 product-template.liquid 中的内容,我试图让椭圆自动调整文本大小,并在文本的两侧和顶部和底部填充一些,就像图片一样'best seller'。知道如何做到这一点吗?
<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 -%}
我目前拥有的
我想要什么
试试这个代码。 使用您的字体样式和边框颜色。
<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>
这将解决您根据字体大小自动调整大小的问题。
<!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>