Round product overlay customized

Hi, I'm trying to customize a bit the circle overlay for VM products, displaying details from product description. Now I'm stuck because I can't find out how to align the transition a bit to the left (aligned to the image) and more to the top. Please look as it is now:
http://www.awesomescreenshot.com/image/ ... c5a3ff737f
Maybe also if there's a way to add styles to customize the text inside the circle.
I wonder if you could be so kind to help me adjust it.
This is the code I have now:

Code: Select all

.category-view .category .category-overlay > span > span, .browse-view .product .product-overlay > span > span, .featured-view .product .product-overlay > span > span, .latest-view .product .product-overlay > span > span, .topten-view .product .product-overlay > span > span, .recent-view .product .product-overlay > span > span, .productDetails .main-image .product-overlay > span > span {
    -moz-border-radius: 50%;
    -moz-transition: all .3s ease-out;
    -ms-border-radius: 50%;
    -ms-transition: all .3s ease-out;
    -o-border-radius: 50%;
    -o-transition: all .3s ease-out;
    -webkit-border-radius: 50%;
    -webkit-transition: all .3s ease-out;
    background: #ff7e57;
    border-radius: 50%;
    color: #fff;
    display: block;
    filter: alpha(opacity=0);
    font-weight: 600;
    height: 160px;
    line-height: 30px;
    margin: 100% auto 30%;
    opacity: 0;
    text-align: center;
    transition: all .3s ease-out;
    width: 160px;
}

Thank you in advance!

I've found that this adjustement (always on vm.css) solves the problem for the category view

Code: Select all

.category-view .category .category-overlay, .browse-view .product .product-overlay, .featured-view .product .product-overlay, .latest-view .product .product-overlay, .topten-view .product .product-overlay, .recent-view .product .product-overlay, .productDetails .main-image .product-overlay {
    display: block;
    height: 100%;
    position: absolute;
    right: 10px;
    top: -30px;
    width: 100%;
}

but introduces another one on the product view
http://www.awesomescreenshot.com/image/ ... f48137b1a3
Please, help me find a way to align that transparent white overlay.

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi teitbite, in some way I've solved, thanks, but now I'd like to display some data (eg price, category or other text) inside the blue overlay balloon, for the category view.
I went into html/virtuemart/category/default.php folder of the template and tried to modify this line:

Code: Select all

<a href="<?php echo $product->link; ?>" class="product-overlay"><span><span><?php echo JText::_('TPL_GK_LANG_VM_VIEW'); ?></ br>  test row</span></span></a>


Would it be possible to add 2-3 rows and style it in some way?
Since it's included into the <a> tag it seems impossible, have you got any suggestion in order to succeed?

Please, at least tell me how to set higher the finish point of the balloon, increasing its dimensions now it shows cut on the bottom....

Hi

Sure. Tell me the exact url to the page where I'll be able to see the problem.

Hi,
here's the link: http://bit.ly/1SHcVBU
Summarizing, I would like to
- raise a bit the circle
- customize the "visualizza" style
- use a different style for the price (if I change it now, the product view will change as well)
- display the word "price:" in line with the number
Currently the code I'm using is

Code: Select all

                  <a href="<?php echo $product->link; ?>" class="product-overlay"><span><span><?php echo JText::_('TPL_GK_LANG_VM_VIEW'); ?></ br></ br>price:<?php echo $this->currency->createPriceDiv('salesPrice', '', $product->prices); ?></span></span></a>


Please tell me if you need anything else.

Delving into virtuemart forums I came out with this code:

Code: Select all

                  <a href="<?php echo $product->link; ?>" class="product-overlay"><span><span></ br><?php echo " ",'<span class="PricesalesPrice" style="color:gray; font-size:12px;">'.$product->product_name.'</span>'; ?></ br><?php echo " ",'<span class="PricesalesPrice" style="color:blue; font-size:15px;">'."</ br>Prezzo: ".round($product->prices['salesPrice'],2)." €".'</span>'; ?></span></span></a>


which actually is better than before (there's finally a way, even hardcoded, to style text), but still
- does not separate in two lines the product title and the price (look at the lower products)
- does not frame the text in order not to go out of the circle
- the circle still doesn't go up to the center of the image
Please, I count on your advice.

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

.category-view .category.active .category-overlay > span > span, .browse-view .product.active .product-overlay > span > span, .featured-view .product.active .product-overlay > span > span, .latest-view .product.active .product-overlay > span > span, .topten-view .product.active .product-overlay > span > span, .recent-view .product.active .product-overlay > span > span, .productDetails .main-image.active .product-overlay > span > span {
    margin-top: 15%;
}

span.PricesalesPrice {
    display: block;
    text-align: center;
}


Great Teitbite, thanks, your code solved the circle issue, but acted on price in product page, so I've created a new PricesalesPriceCat class and modified accordingly.
line-height was too big, so I set to 30px, but now the title, being higher, exceeds circle borders. See http://bit.ly/1SHcVBU
I'd need to create a virtual box, so I've tried setting margins to span, but they affect every single row, and setting them to <a> tag has the same effect.
Have you got an idea on how to "box" title and price and let them fit the circle?
Thanks in advance

Hi

Try using css selector:

Code: Select all

span.PricesalesPriceCat:first-child {
margin-top: 30px;
}


to make changes to first row only. Or this selector:

Code: Select all

span.PricesalesPriceCat:last-child {
font-weight: bold;
}


Thank you, selectors solved, I'm even testing with a middle element and :nth-child(2)

Code: Select all

span.PricesalesPriceCat:first-child {
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 60px
}

span.PricesalesPriceCat:nth-child(2) {
font-weight: bold;
margin-top: 0px;
}

span.PricesalesPriceCat:last-child {
font-weight: bold;
margin-top: 0px;
}

Hi

Och ok. There were only 2 elements when I was checking, So there were no need for "nth-child()" than. If everything is ok now than I'm closing this thread.