Video of background in Quark "E-Commerce"

Hi. In the Demo of the Quark Template "Restaurant" I have seen a Video of background to full page ... It is possible to use that solution of the Video of background in Quark "E-Commerce", thanks, greetings. Good Year 2017. René

Hi

Yes. Please make sure to add module class suffix: "video-bg" and have this code copied to css:

Code: Select all

.box.video-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 340px 0 !important;
}
.box.video-bg video {
    background: transparent none repeat scroll 0 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: auto;
}
.box.video-bg::before {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.box.video-bg .gk-border-box {
    border: 2px solid #e78531;
    color: #fff;
    margin: 0 auto;
    padding: 80px 80px 30px;
    position: relative;
    text-align: center;
    width: 630px;
    z-index: 2;
}
.box.video-bg .gk-border-box > sup {
    font-size: 16px;
    text-transform: uppercase;
}
.box.video-bg .gk-border-box > h2 {
    color: #fff;
    font-size: 50px;
    letter-spacing: 4px;
    line-height: 1;
    margin: 0 0 20px;
    text-transform: uppercase;
}
.box.video-bg .gk-border-box > i {
    color: #dd973a;
    display: block;
    font-size: 36px;
    margin: 0 0 30px;
}
.box.video-bg .gk-border-box .gk-phone-number > sup {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.box.video-bg .gk-border-box .gk-phone-number > strong {
    display: block;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1.5px;
}
.box.video-bg .gk-border-box .gk-reservation-button {
    display: block;
}
.box.video-bg .gk-border-box .gk-reservation-button > sup {
    display: block;
    font-size: 12px;
    padding: 40px 0 16px;
    text-transform: uppercase;
}
.box.video-bg .gk-border-box .gk-reservation-button > .btn {
    background: #dd973a none repeat scroll 0 0;
    border: medium none;
    border-radius: 1px;
    color: #fff !important;
}
.box.video-bg .gk-border-box .gk-reservation-button > .btn:active, .box.video-bg .gk-border-box .gk-reservation-button > .btn:focus, .box.video-bg .gk-border-box .gk-reservation-button > .btn:hover {
    background: #fff none repeat scroll 0 0;
    color: #dd973a !important;
}
.box.video-bg .gk-border-box > small {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    padding: 65px 0 0;
}


Hi. Thank you for your response and sorry if I do not understand. 1) I must add all the code to the "Custom CSS code" of the Template. 2) I must be sure to add module class suffix: "video-bg". 3) But I do not understand what module it refers to, or possibly where I can download it, as I believe in "Quark E-Commerce" is not present. 4) This module where it will be displayed, in which position of the Quark E-Commerce Template. Greetings thank you. René.

Hi

You have asked to copy a video module from Quark Template "Restaurant", so I assumed You only want to know what code needs to be copied along it.

HTML is:

Code: Select all

<div class="gk-border-box" data-sr="enter bottom and move 100px and scale up 15% over .8s"><sup>Come and enjoy</sup>
<h2>Book a table</h2>
<span class="gk-phone-number"> <sup>Monday - Sunday 10AM : 10PM</sup> <strong>+123 123 123 123</strong> </span> <span class="gk-reservation-button"> <sup>or use the form</sup> <a class="btn" href="index.php/booking" data-sr="enter bottom and move 20px and wait .4s">Make reservation</a> </span> <small>Your reservation will be kept for 30 minutes from your booking time after that space will be released.</small></div>
<p><video poster="images/demo/restaurant-style/bg.jpg" autoplay="autoplay" loop="loop" muted="">
     <source src="images/demo/restaurant-style/bg.mp4" type="video/mp4" />
     <source src="images/demo/restaurant-style/bg.ogg" type="video/ogg" />
     Your browser does not support the video tag. </video></p>


and You can use any module position as long as it supports module class suffixes, so You will be able to add "video-bg"

Hi, thanks for your response. I bought Quark Template to GavickPro, but as I have only installed the E-Commerce version, I do not have the module I need ... where can I download it, or how can I get it out of Quark's installation? Greetings, thanks. René.

Hi

It doesn't work like that. It's more like 3 different templates in one. But elements of this templates cannot be swapped. It's because, on style selection all the style files are replaced, so You will lost all the look You've been working on already.

Anyway I gave You all the HTML and CSS needed, so just use it in Your css files and as a content of the module with video and it should work just fine.

Hi. Ok, you're right, I had no idea that everything was separate ... I will use the code you suggested, thank you, greetings. René

Hi

No problem. Glad I could help

I want the video background to be in the header in Restaurant.
When I use the video background code it doesn't work correctly (sites over to one side).
How much effort is needed to get this to work correctly?

Hi

Header module position does not allow adding module class suffix by default. You can change it by overwrite it in template settings for header module position and using "gk_style"

This is one tough and complicated template.. nothing works intuitively.. for a quick launcher, its hard to find anything that works or figure out how to customize stuff.

Hi

Depends what You are trying to do @pmcnamara. Most users install and simply starts adding their content, so the layout fills with that itself since modules are focused on showing most recent articles.

You can also check https://www.gavick.com/documentation/ for the general template settings or to look for the most standard customisations which were asked on our forum.

I'm here to help with some small changes as well, so please do not hesitate to ask.