

008 <p><br></p>
009
010 <p>I następujący kod do pliku CSS Twojego motywu (np. <em>default.shop.css</em>):<br></p>
011
>>012 <pre class="prettyprint"><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">promos </span></span><span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln"> margin</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">5px</span></span><span class="pln"><span class="pln"> </span></span><span class="pun"><span class="pun">-</span></span><span class="lit"><span class="lit">25px</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> </span></span><span class="pun"><span class="pun">}</span></span><span class="pln"><span class="pln"><br></span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">promos ul </span></span><span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln"> padding</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> margin</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> </span></span><span class="pun"><span class="pun">}</span></span><span class="pln"><span class="pln"><br></span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">promos ul li </span></span><span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln"> padding</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> margin</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> list</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">style</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> none</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> display</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="kwd"><span class="kwd">inline</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">block</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> width</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">25</span></span><span class="pun"><span class="pun">%;</span></span><span class="pln"><span class="pln"> </span></span><span class="kwd"><span class="kwd">float</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> left</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> </span></span><span class="pun"><span class="pun">}</span></span><span class="pln"><span class="pln"> <br></span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">promos ul li a </span></span><span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln"> display</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> block</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> padding</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">40px</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">20px</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> height</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">80px</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> overflow</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> hidden</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> background</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">size</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> cover</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> background</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">position</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> center center</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> color</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="com"><span class="com">#000; background-color: rgba(0,0,0,0.05); border: 5px solid #fff; text-align: center; position: relative; }</span></span><span class="pln"><span class="pln"><br></span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">promos ul li a </span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">background</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">color</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">layer </span></span><span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln"> position</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> absolute</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> top</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> left</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> right</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> bottom</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> z</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">index</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">1</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> opacity</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0.1</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> background</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">color</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="com"><span class="com">#000; }</span></span><span class="pln"><span class="pln"><br></span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">promos ul li a h5 </span></span><span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln"> font</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">size</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">1.3em</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> text</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">shadow</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">1px</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">2px</span></span><span class="pln"><span class="pln"> </span></span><span class="com"><span class="com">#000; position: relative; z-index: 2; }</span></span><span class="pln"><span class="pln"><br></span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">promos ul li a p </span></span><span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln"> font</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">size</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0.9em</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> text</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">shadow</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">1px</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">1px</span></span><span class="pln"><span class="pln"> </span></span><span class="com"><span class="com">#000; position: relative; z-index: 2; }</span></span><span class="pln"><span class="pln"><br></span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">promos ul li a</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln">hover </span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">background</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">color</span></span><span class="pun"><span class="pun">-</span></span><span class="pln"><span class="pln">layer </span></span><span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln"> opacity</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0.5</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> transition</span></span><span class="pun"><span class="pun">:</span></span><span class="pln"><span class="pln"> </span></span><span class="lit"><span class="lit">0.3s</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln"> </span></span><span class="pun"><span class="pun">}</span></span></pre>
013
014 <p><br></p>
015
016 <p>Po dodaniu promocji karty powinny pojawić się na stronie głównej sklepu internetowego. Jeśli karty nie są wyświetlane poprawnie, co jest możliwe ze względu na specyfikę motywu projektu, skonfiguruj osobne reguły wyświetlania w pliku CSS: rozmiary kart, kolor czcionek itp.<br></p>

Pomóż innym użytkownikom w wyborze — bądź pierwszy, który podzieli się swoją opinią o tym poście.