[SOLVED] Change the background of Quick View popup/modal

[thepsyntist]

Hi, I want to change the background of quick access popup. I tried to look under quickview.tpl file but couldn't find anything. How can I change this white color to some other color?  Thanks in advance.

Edited March 28, 2015 by thepsyntist (see edit history)

[dioniz]

Quick view is actually product page loaded in iframe so i don't think it's an easy way to change background without changing product page background.

[thepsyntist]

Quick view is actually product page loaded in iframe so i don't think it's an easy way to change background without changing product page background.

Thank you for your response! 

 

Is there a way I can add a new CSS style? if yes, which files would I need to change? This would be so much of a help. Thanks!  

[soufiane011]

Hi thepsyntist,

Yes you can do that by adding some code css to your product.css in the root/theme/yourTheme/css/product.css

add this code to change background from white to black

.test { background: rgba(0,0,0,0.1); }

Note: you can add many proprities to css like color, font-size etc...

Then you need to add you new class into the root/theme/yourTheme/product.tpl

in the line 37 like this:

<div itemscope itemtype="http://schema.org/Product">
	<div class="primary_block row test">
		{if !$content_only}
			<div class="container">
				<div class="top-hr"></div>
			</div>
		{/if}

Note: you should clear your cache

[thepsyntist]

Hi thepsyntist,

Yes you can do that by adding some code css to your product.css in the root/theme/yourTheme/css/product.css

add this code to change background from white to black

.test { background: rgba(0,0,0,0.1); }

Note: you can add many proprities to css like color, font-size etc...

Then you need to add you new class into the root/theme/yourTheme/product.tpl

in the line 37 like this:

<div itemscope itemtype="http://schema.org/Product">
	<div class="primary_block row test">
		{if !$content_only}
			<div class="container">
				<div class="top-hr"></div>
			</div>
		{/if}

Note: you should clear your cache

Thank you very much. It solved the issue!  

[soufiane011]

You are welcome