Zmiana wyglądu ceny

Question

W jaki sposób mogę ugryźć temat zmiany wyglądu ceny, by prezentowała się jak na obrazku poniżej?

W tej chwili wygląda po prostu tak:

.main_price {
	color: #0d33ad;
	margin: 0;
	padding: 20px;
	font-family: Lato;

Nie wiem, czy w CSS będzie dało się to wymodelować, stąd moje pytanie.

Comments

Prawdopodobnie trzeba będzie użyć smarty i explody, bo cena skonfigurowana jest z z modułem wewnętrznym sklepu SOTE.

---

Czy istnieje możliwość wrzucenia do pliku kodu php?

echo floor($product)."<sup>".(($product - floor($product)) * 100)."</sup><sub>zł</sub>";

Answer 1

<div class="main_price">15 <sup>,00</sup> <sub>zł</sub></div>

.main_price {
    color: #0d33ad;
    margin: 0;
    padding: 20px;
    font-family: Lato;
}
sub { 
  margin-left: -1rem;
}

Przy pomocy tagów sub i sup.

Answer 2

<div class="container">
  <div class="main_price">150</div>
<div class="wrapper">
  <div>,00</div>
  <div>zł<div>
    </div>
</div>

.container {
  display: flex;
  height: 40px;
}

.main_price {
  font-size: 40px
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

Reszte dopasuj to tego co chcesz uzyskac

Comments

Dziękuję, ale problem polega na tym, że wartości cenowe sa zmieniane w panelu administracyjnym sklepu SOTE. Nie wprowadzam ich bezpośrednio w HTML.

Tak wyglada HTML odpowiedzialny za moduł z cenami:

{if $show_price==1}
                    <div class="main_price" data-equalizer-watch="main_price">
                    {if $show_discount==1 && $product.discount!=0 && $product.check_price!=1}
                        <div class="discount-old_price text-center">
                            <div class="discount">{__ text="Rabat"}: {$product.discount} %</div>
                        </div>
                    {elseif ($show_old_price==1 && $product.check_price!=1 && $product.check_old_price==1)}
                        <div class="discount-old_price text-center">
                            <div class="price old_price">
                            {if ($price_view=='net_gross' || $price_view=='only_net')}
                                {$product.old_price_net}
                            {else}
                                {$product.old_price}
                            {/if}
                           </div>
                       </div>
                    {/if}                    
                    {if $show_price==1 && $product.check_price!=1}
                        {if $price_view=='net_gross'}
                            <div class="price major_price">{__ text="netto"}: {$product.price_net}</div>
                            <div class="price minor_price">({__ text="brutto"}: {$product.price})</div>
                        {elseif $price_view=='only_gross'}
                            <div class="price">{$product.price}</div>
                        {elseif $price_view=='only_net'}
                            <div class="price">{__ text="netto"}: {$product.price_net}</div>
                        {elseif $price_view=='gross_net'}
                            <div class="price major_price">{__ text="brutto"}: {$product.price}</div>
                            <div class="price minor_price">({__ text="netto"}: {$product.price_net})</div>
                        {/if}

                    {/if}
                    </div>

 

Answer 3

Kombinuj, baw sie.

<div class="cennik">
  <div class="left">
    150
  </div>
  <div class="right">
    <span class="grosze">,99</span>
    <span class="txt">rok</span>
  </div>
</div>

.body {
  background-color: #303030;
}
.cennik{
  margin-left: auto;
  margin-right: auto;
  
}
.left {
  font-size: 60px;
  line-height: 44px;
  font-weight:700;
  color: blue;
  
}
.left, .right {
  display: inline-block;
}
.grosze {
  color:blue;
}
.grosze, .txt {
  display: block;
  font-size: 22px;
}