http://www.kriesi.at/support/topic/replete-styling-of-the-product-price-at-product-level Support Forum - Topic: replete styling of the product price at product level en-US Fri, 24 May 2013 00:55:58 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/replete-styling-of-the-product-price-at-product-level#post-91413 Mon, 14 Jan 2013 01:24:51 +0000 Ismael 91413@http://www.kriesi.at/support/ <p>Hi,</p> <p>Try to add this then</p> <pre><code>.archive #top .price, .archive #top .price span, .archive #top del, #top ins{ display:inline; font-size: 10px !important; }</code></pre> <p>Change the font-size value.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/replete-styling-of-the-product-price-at-product-level#post-91348 Sun, 13 Jan 2013 10:29:18 +0000 gsTom 91348@http://www.kriesi.at/support/ <p>Hi Ismael,</p> <p>the font-size change is working well in custom.css also without !important declaration.<br /> Unfortunatley it also changes the font size in the archive page (where all products are listed) :(</p> <p>The alignment of the price tag to the right I could still not accomplish</p> <p>Thanks<br /> Tom </p> http://www.kriesi.at/support/topic/replete-styling-of-the-product-price-at-product-level#post-91331 Sun, 13 Jan 2013 09:06:43 +0000 Ismael 91331@http://www.kriesi.at/support/ <p>Hi gsTom,</p> <p>To prevent other styles from overwriting the style you made in custom.css or Quick CSS, try using the !important. For, example in your code above font-size doesn't change, try to change your code to this:<br /> <pre><code>#top .price, #top .price span, #top del, #top ins{ display:inline; text-decoration: none; font-size: 12px !important; line-height: 18px; font-weight: bold; }</code></pre> <p>For the margin-bottom not working, try to change your display value from inline to inline-block. Hope this helps.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/replete-styling-of-the-product-price-at-product-level#post-91282 Sat, 12 Jan 2013 18:24:50 +0000 gsTom 91282@http://www.kriesi.at/support/ <p>Hi, again me,</p> <p>sorry, but it is really hard for a beginner :-|</p> <p>On the product page the price is just below the product title (it's a product with variants all the same price) left aligned and very small in size. Following suggestions from another post here, I figured out with firebug, that there is following structure</p> <p>the price is inside of an span with the class .amount<br /> wrapped arround is a paragraph with the class .price<br /> this both are wrapped by a div without id or class, which seems to me is just for microdata purposes (i.e. google rich snippet?)</p> <p>however, I want to make the price bigger cause I don't need to hide it :) the css I found in woocommerce-mod.css line 405, so I made a copy of it to put it into my custom.css, it carries this css where I can change the price font-size:</p> <pre><code>#top .price, #top .price span, #top del, #top ins{ display:inline; text-decoration: none; font-size: 12px; line-height: 18px; font-weight: bold; }</code></pre> <p>But for the allignment of the price to the right I need to touch the paragraph (p) since I can not allign inline elements. Inspecting it further, I believe to found the p elment in the backend custom style modifications area directly in the pages source code, which comes after the custom.css, so overwriting it.<br /> So this does not change anything:<br /> <code>p.price { text-align: right; }</code></p> <p>Also a margin-bottom is ignored. Where can I get this done?</p> <p>Thanks for hints<br /> Tom</p> <p>PS: nearby, hint for the next version:)<br /> * the add to cart button is missing its lower border (caused by 1px too much vertical padding)<br /> * with woo shareThis enabled, the sku, category and reset selection line is sticking to close to the shareThis buttons (product_meta missing border-bottom) </p>