Hi Eri

This area is created using the LayerSlideshow module bundled with the template. This module allows you to create an image slideshow with a text overlay for each image.

Ciarán

Dear Ciaran,

I bought the KINVARA template but when I try to use J51 LayerSlideshow Module in the SERENITY template it does not work at all?

Can you please advise?

Thank you again for your help!

Hello

Would you have a URL to an example of the issue?

Ciarán

Yes,

Take a look at the following page: http://www.gw-thegreekwineroutes.com/en/online-shop/

Is this issue present if slideshow placed in a different module position (eg. top-1a)?

Ciarán

Yes the problem insists.. Take a look http://www.gw-thegreekwineroutes.com/en/online-shop/

Does this have to do with the custom css I have added?

.cmc-signup .btn-primary {
background-color: #f5f1eb;
background-image: linear-gradient(to bottom, #f5f1eb, #f5f1eb);
background-repeat: repeat-x;
border-color: #f5f1eb #f5f1eb #f5f1eb;
color: #707070;
text-shadow: 0 -1px 0 rgba(255, 255, 255,0.25);
font-size: 16px;
}

.owl-theme .owl-controls .owl-buttons div {
background-color: #5c5c5c !important;
}

.cmc-signup label, .cmc-signup input, .cmc-signup button, .cmc-signup select, .cmc-signup textarea {
font-size: 16px;
font-weight: normal;
line-height: 18px;
}

h2 {
font-size: 4em;
text-align:center;
}

.hornav > ul > .parent-hover {
background-color: #f5f1eb;
}

.item-title::after, .page-header::after {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
content: "";
display: block;
margin-bottom: 25px;
margin-left: auto;
margin-right: auto;
position: relative;
top: -10px;
width: 100px;
z-index: 0;
}

#socialmedia {
display: block !important;
}

.logo {
padding: 10px 20px 0px 20px;
}

#container_header {
top: 100px;
}

.sj-instagram-gallery .instagram-wrap {
margin: 0px 0;
padding: 0;
overflow: hidden;
border: 0;
}

.sj-instagram-gallery .instagram-items-container .instagram-items-inner .instagram-item .instagram_users a img {
border: 0;
}

.j51snipcart .price {
display: none;
}

It appears to be Javascript conflict rather than a CSS issue. Is the issue present on all pages? If so then disable any plugins that you are not using.

Ciarán

I am afraid I cannot discriminate which plugins I am not using..They are too many.

Any idea which one may cause the problem?

HI Eri

It is difficult to say. It is strongly recommended to disable any plugins that you are not using as they can quite often load unwanted assets, slowing your site and causing possible conflicts with used extensions.

Ciarán

Hello Ciaran,


After much search I found out that by disabling jQuery Easy plugin the LayerSlideshow module works fine!

Now as I want it to work harmonically with SERENITY template can you please tell me if there is a way of the module working without the background image as I have already set background images in the styling of the SERENITY template?

Ideally I would like to keep the images set in the styling tab of the SERENITY template and from the Layerslideshow to keep only the text effect and not the slide images.

Can you please have a look?

http://www.gw-thegreekwineroutes.com/en/online-shop

Also, I noticed that in the styling of SERENITY template the add and delete buttons for the Header images disappeared..Instead there are three points shown and I cannot add and delete images. Can you also have a look at it?

Thank you again for your help!

Hello

Presuming I understand you correctly try adding the following to the Custom CSS field of your template settings...

.layerslideshow .img-fill img {

    opacity: 0;

}

Ciarán

Hi Ciaran!

1. Yes it is ok now in the desktop version but not in the mobile portrait version where the module disappears!

Please have a look: http://www.gw-thegreekwineroutes.com/en/

Is there a solution to this too?

2. Also, I noticed that in the styling of SERENITY template the add and delete buttons for the Header images disappeared..Instead there are three points shown and I cannot add and delete images. Can you also have a look at it?


Thank you in advance!!!

Hello

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)...

@media only screen and (max-width: 767px) {

.layerslideshow .info-wrapper {

    max-width: 90%;

}}

.layerslideshow .info {

    display: flex !important;

}

2. This issue should be now resolved?

Ciarán

Regarding question 1. it is almost resolved...

the width is ok but the info-wrapper stays rather high in the screen and social media icons overlay it..Additionally the top and the bottom of the info wrapper seems to crop a little..

Issue 2. is ok now!

Hello

To reduce the height of this area try amending the following in the Custom CSS field of your template settings...

#container_header_slide {

    height: 100vh !important;

}

To reduce the chance of cropping and to lower the slide on small screens you can also add the following...

@media only screen and (max-width: 767px) {

.layerslideshow {

    margin-top: 50px;

}

.layerslideshow .info-wrapper {

    padding: 10px !important;

}}

Ciarán