Hi,
You can't do that. It is practically impossible.
You can define a new <div></div> inside the slider and give it a position:absolute; then make its background as that gradient background. That will give you the effect you are looking for BUT if you do that, since this new DIV is overlaping the slider completely, the product in the slider will become "unclickable". Because this new DIV that has the gradient background stays above them, the product will be still visible but just because that gradient background image is "transparent" in the middle, but this doesn't change the fact that it overlaps the slider.
What you need to do is to create 2 different piece of gradient background images for left and right (their width size must be around 110px to 120px), and the middle must be stay clear. So the product image in the middle will be clickable. Got it?
This is actually the customization request and we are not responsible for the custom changes. This forum is exist for only support tickets (it is not a discussion forum). But i will try to help you out to achieve what you are looking for though.
First open this PHP file to add an extra <div> </div> TAG to there to get the background effect on the slider.
ROOt/modules/mod_vm_flexible_fancy_slider/tmpl/theme.php
Right before this Line:
<div id="FlexibleSliderPanel" class="FlexibleSlider-panelDIV">
ADD THIS below:
<div class="fancySliderGradientLEFT"> </div>
<div class="fancySliderGradientRIHGT"> </div>
Then, open any CSS file that gets loaded in your website. OR this:
sokitty.sk/modules/mod_vm_flexible_fancy_slider/media/css/themeBorder.css
To the bottom add these CSS rules:
#slider-basic-container-1 .fancySliderGradientLEFT
background:url(Type the image URL of the LEFT gradient background image)
width:120px;
height:320px;
position:absolute;
top:0px;
left:0px;
z-index:999;
}
#slider-basic-container-1 .fancySliderGradientRIGHT
background:url(Type the image URL of the RIGHT gradient background image)
width:120px;
height:320px;
position:absolute;
top:0px;
right:0px;
z-index:999;
}
I tested above with using FIREBUG in your website and it works. See the screenshot:
Attachment Pasted_Image_2_6_13_3_34_AM.gif not found
Regards.
Forum Support.
$0.00 (0 items)
