Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Virtuemart Fancy Product Slider (SKU# FLEX-00004)

TOPIC: top layer insert over the slider

top layer insert over the slider 11 years 3 months ago #2296

Hi

I would like to add tpartially transparent top layer to cover fancy slider
Slider is lodcated here:
sokitty.sk/index.php/gift-cards1

I want to have left and right side covered by opacity white cover, like on picture in the atachment

Can you please help me? I was trying to play with z-indez + bg but did not work for me

thanx
Attachments:
The topic has been locked.

top layer insert over the slider 11 years 3 months ago #2306

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">&nbsp;</div>
<div class="fancySliderGradientRIHGT">&nbsp;</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.
Last Edit: 11 years 3 months ago by Support.
The topic has been locked.

top layer insert over the slider 11 years 3 months ago #2309

Hi guys,

you are awesome... I also bought virtuemart template and can confirm, your support is great.
I've already installed this... SOLVED
The topic has been locked.

top layer insert over the slider 11 years 3 months ago #2378

Hi,

What you are asking was really challenging additionally it was a brilliant idea ;)
I am glad this works out well in your case, and i am hoping this post will be useful to others for those who are willing to do the same thing.

Regards.
Forum Support.
The topic has been locked.
Time to create page: 0.120 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo