change the width of the add to cart popup

[ibnati]

hello

i want to change the width of  the add to cart popup but when i change it, it effet the width of the images  zoom popup of the detail page because the both use fancybox

also is there any methode to change only the css of the add to cart popup like using a javascript cod that add a css class to the add to cart popup or any other method ?


thanks
amine

[hellorain]

Hello,

If you are using virtumart 3.0 then you can change css from below path.

components/com_virtuemart/assets/css/vm-ltr-site.css

It will be better if you provide site details or screen shot of your issue.

Best Regards,
hellorain.

[jenkinhill]

@ibnati start here:  http://forum.virtuemart.net/index.php?topic=128401.0

[ibnati]

hello

sorry also i use the latest version of vm and php 7

also the issue is as you look here https://www.screencast.com/t/oXyGKSIoA9

also i have changed the css of the popup using this cod

Code Select Expand

#fancybox-wrap {

    padding: 0px !important;
    padding-bottom: 4px !important;
width: 440px !important;
    #fancybox-content {
    width: 428px !important;
padding-bottom:9px !important;
    }
}



.popup-cart .item-wrap {
    width: 428px !important;
}
#fancybox-outer {

    width: 448px;
}

but the problem is the the zoom image popup in the right side  (https://www.screencast.com/t/eY2Lykp4a)has been changed too and it not look good because of the width of the popup

also for this i want change the css only of the add to cart popup not the other popups

also for example i have seen in one template they use this js cod

Code Select Expand

$.facebox( txt , 'my-style2'); to insert  the class "my-style2" into the add to cart popup and so they changed it width without chaging the width of all popups

how can do this please ?

thanks
amine

[ibnati]

also i have added this js cod

Code Select Expand

if (Virtuemart.addtocart_popup ==1) {

  $("#fancybox-wrap").addClass('classname');

}  else { 
$("#fancybox-wrap").addClass('classname1');
}


but it add the class "classname" in both add to cart popup and in the image popup https://i.imgur.com/sRlnK8r.png

how can i fix this please ?

thanks
amine

[jenkinhill]

screencast requires me to install flash, so I can't see any image. This needs a URL to see the problem.

[ibnati]

ok you can see it here :

http://dev.cjdesigners.com/en/shop/front-page/product-caro/dress-shirt-with-tie-s-detail

http://dev.cjdesigners.com/popup-issue.png

[ibnati]

hello
have you any fix for this please ?

[jenkinhill]

Edit & override components/com_virtuemart/views/cart/tmpl/padded.php

Wrap the contents of that template file in a div which can be styled as appropriate.

Eg adding:
?>   
<div style="width:600px;">
<?php

immediately below  defined('_JEXEC') or die('Restricted access');

and closing the div at the end of the file would give the add to cart popup width of 600px and not affect anything else.

You should add a class to the div instead of an in-line style for responsive templates.    You probably already have an override for padded.php in which case edit that file.

[GJC Web Design]

As Jenks says .. make use of files that are only rendered in the view you want

so e.g. in padded.php you could add any css u wanted and it would only effect that view

e.g.
<style type="text/css">
#fancybox-wrap {

    padding: 0px !important;
    padding-bottom: 4px !important;
    width: 440px !important;
    #fancybox-content {
    width: 428px !important;
   padding-bottom:9px !important;
    }
}



.popup-cart .item-wrap {
    width: 428px !important;
}
#fancybox-outer {

    width: 448px;
}
</style>

[ibnati]

ok , thank you very much it solved the issue