<p>In your product_list.tpl find statements like this:</p>
<p> </p>
<p><h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:<span style="color:#ff0000;">19</span>:'...'}</a></h3></p>
<p> </p>
<p>Change truncate value - it's a length of string which will be displayed and ended with ... Don't forget, that "m" is larger then "i" so be careful with the value you set... Better may be smaller, but not too short...</p>
<p> </p>
<p>Just behind iffed strings (e.g. availability, only online...) I put </p>
<p> </p>
<p></span><span style="color:#ff0000;">{else}<span class="availability"> </span></span>{/if}</p>
<p> </p>
<p>where class is the same as for the rest of the statement. If attribute is not set, it will keep the place, so whether attribute is displayed or not, the height is the same...</p>
<p> </p>
<p>For <span style="color:#0000cd;">availability</span> class it looks like this:</p>
<p> </p>
<p> </p>
<div>{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="<span style="color:#0000ff;">availability</span>">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span><span style="color:#ff0000;">{else}<span class="availability"> </span></span>{/if}</div></div>
<div> </div>
<div>The similar spans I will use in my product page as well, and if there's need, for subcategories, too.</div>