I have an issue with all the pop-up boxes including Quick Look, Ask a Question, and Email a Friend. The product is displayed with Joomla template styling that is too wide for the iframe and includes a background color (see the attached screenshot quicklook1.png).



I can fix the issues by changing CSS (see attached screenshot quicklook2.png - I made temporary CSS changes using Firebug to get this effect).



Unfortunately when I add these CSS overrides to a stylesheet they affects those IDs and classes everywhere on the site, and I only need to adjust it inside each pop-up's iframe. Since the iframe is loading a completely new HTML page inside it with its own head and body, there is no unique selector I can target. Can you suggest a solution, perhaps by adding a unique ID or class inside the iframe?

Thanks, Richard

Hi,

What opens inside the quicklook is actually the product details page, so changing things with CSS will also effect your regular product details page. So this is not what we are looking for.

But you got the idea, A new CSS rules should be defined for "quicklook" layouts, and it should be exist only for quicklook modal popup.

IT looks like you are an advanced coder, so i am sure you will understand what i am saying.
Please follow my steps:

Open this PHP file:
ROOT/templates/<yourjoomlatemplatefolder>/html/com_virtuemart/productdetails/default.php
(default.php or what ever layout you chose from VM Configuration)

and find this DIV tag (it is somewhere around 175th line):

<div class="productdetails-view">

Right above it; add this PHP lines:

This PHP lines means, if the $parameter is "quicklook" then it will print the extra STYLE lines. ($paremer is defined as "quicklook" already when the quicklook button is clicked through category browse page)

So with these extra style lines, you can replace the BODY background from dark-red to white. Or you can define another CSS rule. which ever works for you. You can also decrease the width value, so the scrollbar won't appear inside the modal box.

Cheers.

Thanks for the help. I had to adjust the CSS styles, but I got it to work for the quicklook parameter. I also need to make this adjustment for the Ask a Question and Email a Friend modals. I tried "askquestion" and "recommend" parameters but it didn't work.

I'd say I'm an experienced coder for HTML and CSS, but I don't know PHP at all. So I'm usually stumbling around blind with this stuff. This is the PHP block I tried. It works for quicklook, but not for the others. Maybe there's a way to combine all the parameters into 1 PHP block? Maybe I'm using the wrong parameters?

<?php if ($parameter == "quicklook") { ?>
<style type="text/css">
#rt-main-surround { background-color: #ffffff; }
.rt-container { width: 880px; margin: 0; }
.rt-block { padding: 5px; }
</style>
<?php } ?>

<?php if ($parameter == "askquestion") { ?>
<style type="text/css">
#rt-main-surround { background-color: #ffffff; }
.rt-container { width: 880px; margin: 0; }
.rt-block { padding: 5px; }
</style>
<?php } ?>

<?php if ($parameter == "recommend") { ?>
<style type="text/css">
#rt-main-surround { background-color: #ffffff; }
.rt-container { width: 880px; margin: 0; }
.rt-block { padding: 5px; }
</style>
<?php } ?>

I just realized that askquestion and recommend aren't URL "parameters", that's why it's not working. So how can I target those modal popups?

Add/Edit billing address information modal on checkout page appears to have a parameter "edit", but when I replace "quicklook" in the PHP block you provided above, it still doesn't work. Grrrrrrrrrrr....

Thanks again!
Richard

Hi,

you are in a wrong way.
$parameter is only valid for QUICKLOOK. Not anything else.

Other modal box are all normal, regular pages that are same in original Virtuemart as well.. "Ask a question" and "Recommend" pages are already opening in a regular modal box in the official Virtuemart Template. We didn't touch it.

Provide me your website URL and let me take a look at it, i might find a permanent solution that will for all pages that opens in a modal box.

cheers.

I just emailed login details for website www.interlockingcrochet.com

I managed to located a class that is unique for the Email a Friend and Ask a Question popups = .ask-a-question-view
I was able to make the background of that class white, but there's still a red border around it.

To simplify matters, I set the Ask A Question text link in the product description to display: none; since it's duplicated in the tab below.

Another issue I noticed is the PDF and Print icons at bottom right produce terrible results. I disabled them in VM Configuration, but they still showed, so I had to comment them out in the template file to get rid of them.

Richard