is there a way to transform header wide image in a slide ?

GK User
Tue Jan 26, 2016 12:35 pm
Hi,
I use the template for a restaurant and it's really great
the website owner asks for replacing the full screen image at header with a full screen slider
as on Creativity template
is there a way to do so ?
Thanks
see the website http://www.lejardindescausses.com : demand is to change the large image with a slide
User avatar
Gold Boarder

GK User
Tue Jan 26, 2016 4:24 pm
Ok I have a solution - Hope it will help
1 : download and install module image Show GK4, choose position header
2 : place this module before any other header position in module list
3 : in configuration : choose Module style : gk-creativity
4 : interface : width=2400, height = 1800 (for a wide image slider)

Then you have to modify your css as follows (be sure css override is enabled in template configuration (advanced parameters) )
#gkBg {
background-color: transparent !important;
}
.gkIsWrapperFixed {
background-attachment: scroll;
background-clip: border-box;
background-color: #C3B9DB !important; // HERE YOU CAN CHANGE THE COLOR OF THE BACKGROUND WHEN IMAGE IS LOADING
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: cover !important; // To enable full screen
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1 !important; // doing this way you can keep your "steakhouse" header
}
#gkHeaderMod > div > div {
padding-top: 0 !important;
padding-bottom: 0 !important;
background-color: rgba(147, 132, 168, 0.5); // OPTIONAL HERE YOU CAN CHANGE THE COLOR AS YOU WANT
border-bottom-right-radius: 45px; // optional, just to have a round corner at the bottom right
}
User avatar
Gold Boarder

teitbite
Fri Jan 29, 2016 12:43 pm
Hi

Very well explained :) Thank You for that. Hope more users will benefit from it.
User avatar
Moderator

GK User
Fri Jun 24, 2016 4:37 pm
Hello,
I have implemented this solution on my local version of the site and is working really great, is possible to add the navigation on the slide show (arrows on both edges)?
Thanks in advance, have a great weekend!
Javier

Repitol wrote:Ok I have a solution - Hope it will help
1 : download and install module image Show GK4, choose position header
2 : place this module before any other header position in module list
3 : in configuration : choose Module style : gk-creativity
4 : interface : width=2400, height = 1800 (for a wide image slider)

Then you have to modify your css as follows (be sure css override is enabled in template configuration (advanced parameters) )
#gkBg {
background-color: transparent !important;
}
.gkIsWrapperFixed {
background-attachment: scroll;
background-clip: border-box;
background-color: #C3B9DB !important; // HERE YOU CAN CHANGE THE COLOR OF THE BACKGROUND WHEN IMAGE IS LOADING
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: cover !important; // To enable full screen
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1 !important; // doing this way you can keep your "steakhouse" header
}
#gkHeaderMod > div > div {
padding-top: 0 !important;
padding-bottom: 0 !important;
background-color: rgba(147, 132, 168, 0.5); // OPTIONAL HERE YOU CAN CHANGE THE COLOR AS YOU WANT
border-bottom-right-radius: 45px; // optional, just to have a round corner at the bottom right
}
User avatar
Fresh Boarder

teitbite
Mon Jun 27, 2016 8:43 am
Hi

I'm afraid this particular style of Image Show module does not provide switching on click functionality, so code to do that is simply not there. Adding that would require some big changes to code and I'm afraid it's beyond our support.
User avatar
Moderator

GK User
Tue Oct 17, 2017 2:02 pm
Hi, i've tried to put the code to have a slide but it goes in fixed position and goes behind other content as you can see at my site:
http://www.quantobastasorrento.com/en/prova

Could you please help.
Thanks
User avatar
Fresh Boarder

Joshua M
Wed Oct 18, 2017 8:33 am
Try to add the following custom css code at the bottom of your override.css file:
Code: Select all
body .gkIsWrapperFixed {
    position: absolute;
    height: 500px;
}

but I think you will have to also modify your header content, spaces etc.
User avatar
Moderator

GK User
Thu Oct 19, 2017 10:04 am
You guys are the best! This is exactly the way it should be, someone discovers a useful feature and we all benefit from it.

Thanks a lot!!!
User avatar
Junior Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.