× Support for Joomla 2.5 templates is discontinued. This forum category is read-only.

Centering product price

More
5 years 3 months ago #5950 by Paine
Paine created the topic: Centering product price
On the category overview page, I've added margin-top to the product title so that the title is lowered and increased the size of the box to max-width 100% so that it fills the space. Now I would like to center the product price (and the background image) above the product title, but all of my adjusting CSS doesn't achieve my goal. I'm attaching an image showing my current display, and next to it, the display I'd like to achieve. Can you please provide the solution?

URL: www.kiddsisland.com.au/index.php/boys/boys-clothing
Attachments:

Please Log in or Create an account to join the conversation.

More
5 years 3 months ago #5951 by marcin
marcin replied the topic: Centering product price
Hello,

Currently, the product price is pulled to the top right corner using the absolute position. Normally, the price is located under the product title.

To center a box that is positioned abolutely, you need to know the box width. Since, it is a price box, its width may be various (for example $9.99, $99.99, $999.99). It is not possible to center this box using CSS only, you will need to move the sales price above the product title (virtuemart override of category view is needed).

Other possibility is to remove the absolute position and display the price under the product title. Then it will be easy to center.

You will need to modify some CSS styles located in the vm.css file as follows:

line 419:
.featured-view .spacer .product-price div.PricesalesPrice > span:after, 
.latest-view .spacer .product-price div.PricesalesPrice > span:after, 
.topten-view .spacer .product-price div.PricesalesPrice > span:after, 
.recent-view .spacer .product-price div.PricesalesPrice > span:after, 
.related-products-view .spacer .product-price div.PricesalesPrice > span:after, 
.browse-view .row .product .spacer .product-price div.PricesalesPrice > span:after, 
.vmproduct .product-price div.PricesalesPrice > span:after {
    background: url("../images/style1/price_right.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    height: 35px;
    left: auto;
    position: absolute;
    right: -15px;
    top: 0;
    width: 15px;
}

line 380:
.featured-view .spacer .product-price div.PricesalesPrice > span, 
.latest-view .spacer .product-price div.PricesalesPrice > span, 
.topten-view .spacer .product-price div.PricesalesPrice > span, 
.recent-view .spacer .product-price div.PricesalesPrice > span, 
.related-products-view .spacer .product-price div.PricesalesPrice > span, 
.browse-view .row .product .spacer .product-price div.PricesalesPrice > span, 
.vmproduct .product-price div.PricesalesPrice > span {
    background: url("../images/style2/price_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    float: none;
    font-size: 15px;
    height: 35px;
    line-height: 40px;
    padding: 0;
    position: relative;
}

line 367:
.featured-view .spacer .product-price > div.PricesalesPrice, 
.latest-view .spacer .product-price > div.PricesalesPrice, .topten-view 
.spacer .product-price > div.PricesalesPrice, 
.recent-view .spacer .product-price > div.PricesalesPrice, 
.related-products-view .spacer .product-price > div.PricesalesPrice, 
.browse-view .row .product .spacer .product-price > div.PricesalesPrice, 
.vmproduct .product-price > div.PricesalesPrice {
    margin-bottom: 0;
    text-align: center;
}

Final effect is:



Regards,
Marcin
Attachments:

Please Log in or Create an account to join the conversation.

More
5 years 3 months ago #5952 by Paine
Paine replied the topic: Centering product price
Thankyou very much, this works perfectly. Very neat & easy solution. Thanks for your prompt assistance.

Please Log in or Create an account to join the conversation.

Time to create page: 0.209 seconds

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.