ESHOP - For several products |
← |
Additional modules used in preview: eshop, all lite catalogue modules, search, additional languages, advanced slideshow, responsive mobile.
Copy/paste the code below into corresponding fields:
Custom CSS
/***********************************/
/*CUSTOM GOOGLE FONT - DEMO SETINGS*/
/***********************************/
/*Import the font in HEAD section*/
/*Set the font*/
*{font-family: 'Open Sans', sans-serif !important;}
/************************************************/
/*ESHOP CART COUNT BLOCK ICONIZER - DEMO SETINGS*/
/************************************************/
/*Change the look of item count bubbles (desktop and mobile)*/
div.eCart div.info, .mobileLayout .prCnt {background-color:black; color:white; font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: 0;
text-decoration: none; text-transform: none; border-radius: 50%; box-sizing: border-box; display: block; float: left; height: 25px; width: 25px;
left: 20px; line-height: 25px; margin: 0;position: absolute; text-align: center; top: -10px; }
.mobileLayout .prCnt {background-color: white; border: 1px solid grey; color: black; top: 3px;} /*custom variant for mobile layout*/
/******************************************************************/
/*IFRAME BLOCK ENABLER - DEMO SETINGS (i.e. google maps, youtube) */
/******************************************************************/
iframe {pointer-events: none; opacity:0.5; transition: all 0.3s ease; background-image:url('/uploads/userfiles/data/preload.gif'); background-position:center center; background-repeat:no-repeat; background-size:auto;}
/*******************************************************************************************************************************/
/*IFRAME WINDOW FULL WIDTH / 50% WINDOW HEIGHT - DEMO SETINGS (i.e. google maps in Contacts, change tags to use it elsewhere)*/
/*******************************************************************************************************************************/
.it5/*forms id*/ .iframeHolder iframe {height:100%}
.it5/*forms id*/ .iframeHolder {left: 50%; margin-left: -50vw; width: 100vw; height:50vh;}
/********************************************************************/
/*AUTO RESIZE HEIGHT OF SLIDES according to VIEWPORT - DEMO SETINGS*/
/********************************************************************/
/*slides in background*/
.sliderReservedHeight {height: 70vh !important;}
/*slides in content*/
/*div.slider_cont div.viewport div.slider, div.slider_cont, div.slider_cont div.slides_block, div.slider_cont div.viewport, div.slider_cont div.viewport div.slider div.slide, div.slider_cont div.slide a.normal, div.slider_cont div.viewport
{height: 70vh !important;}*/
/*mobile VH fix - it has to be in px*/
.mobileLayout .sliderReservedHeight {height: 400px !important;}
/*fck zone positioning*/
html body#bdy div.widthClip table.layer.blockCnt div.sliderReservedHeight div.fck, div.sliderCrop div.slide div.fck
{box-sizing: border-box; height: auto !important; margin-top: -200px !important; max-height: 400px; padding-left: 10px; padding-right: 10px; position: absolute; top: 50%;}
/**** **** **** **** **** **** **** ****/
/**** LAYOUT/DEFAULT RELATED CSS ****/
/**** **** **** **** **** **** **** ****/
/*Desktop Startpage*/
body.startpage div.layers_cont div.prod_list {left: 50%; margin-left: -50.5vw; width: 100vw !important; } /*H center products container*/
body.startpage.mobileLayout div.layers_cont div.prod_list {margin-left: -50vw;}
body.startpage div.layers_cont div.prod_list div.mthumb {width: 100% !important; height: 100vh;margin-bottom: 0;}
body.startpage div.layers_cont div.prod_list div.mthumb:hover {opacity:1;}
body.startpage div.layers_cont div.prod_list div.mthumb a.thumb {height: 100vh; background-attachment: fixed;}
body.startpage.mobileLayout div.layers_cont div.prod_list div.mthumb a.thumb {background-attachment: scroll;}
body.startpage div.layers_cont div.prod_list div.mthumb div.title {position: absolute; top: 40%; overflow: visible; /*background-color: rgba(0,0,0,0.3);*/ background-color:transparent; border-bottom:none;width: 400px;right: 20px; text-align:right;height: auto;padding: 20px; text-shadow: 0 0 2px black;}
body.startpage.mobileLayout div.layers_cont div.prod_list div.mthumb div.title {width:100%;right:auto;}
body.startpage div.layers_cont div.prod_list div.mthumb div.title div.price {font-size: 60px; font-weight: normal; letter-spacing: 0; color: white;display: block; float:right; display:block; width:100%; text-align: center;font-weight: bold; text-shadow: 0 0 1px black;}
body.startpage div.layers_cont div.prod_list div.mthumb div.title a {display: block; float: right; font-size: 15px; width:100%; line-height: 100%; color: white; text-align: center;}
div.prod_list div.mthumb span.newTip, div.prod_list div.mthumb span.saleTip, div.prod_list div.mthumb span.popularTip {display:none;}
/*Desktop Innerpage*/
body.eshop div.product_cont div.pictures a.thumb {height: 50vh;}
body.eshop div.product_cont div.pictures {overflow:visible;}
body.eshop div.product_cont div.pictures a.thumb {left: 50%; margin-left: -50vw; width: 100vw !important; height:70vh; margin-top: -15px;}
body.eshop div.product_cont .header {z-index: 10}
body.eshop div.product_cont.photoWide h3.header
{background-color: rgba(255, 255, 255, 0.7); box-sizing: border-box; left: 50%; margin-left: -50vw; padding-left: calc((100vw - 1200px) / 2);
width: 100vw; line-height: 100%;padding-bottom: 3px;padding-top: 18px; top: -15px;position: absolute;}
body.eshop.mobileLayout div.product_cont.photoWide h3.header {left: auto; margin-left: auto; padding-left: auto; width: 100%;}
div.product_cont {margin-top: -20px;}
div.data div.nextPrev td.prev {top:auto; bottom:20px;}
div.data div.nextPrev td.next {top:auto; bottom:20px;}
/*Mobile*/
.mobileLayout div.data div.nextPrev td.prev {top:auto; bottom:inherit;}
.mobileLayout div.data div.nextPrev td.next {top:auto; bottom:inherit;}
body.startpage.mobileLayout div.layers_cont div.prod_list div.mthumb {height: 400px;}
body.startpage.mobileLayout div.layers_cont div.prod_list div.mthumb a.thumb {height: 400px;}
body.eshop.mobileLayout div.product_cont div.pictures a.thumb {height: 400px;}
body.eshop.mobileLayout div.product_cont div.pictures a.thumb {height: 400px;}
Custom JS
$(document).ready(function() {
/*
/////youtube, vimeo iframe wrapper - in case its needed/////
$('iframe[src*="youtube.com"]').each(function() {
var url = $(this).attr("src")
$(this).add( $(this).andSelf() ).wrapAll('<div class="iframeVideoHolder" ></div>');
});
$('iframe[src*="vimeo.com"]').each(function() {
var url = $(this).attr("src")
$(this).add( $(this).andSelf() ).wrapAll('<div class="iframeVideoHolder" ></div>');
});
*/
/////iframe wrapper//////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
$('iframe').each(function(){
$(this).add( $(this).andSelf()).wrapAll('<div class="iframeHolder" ></div>');
})
});
/////youtube, vimeo iframe wrap remover/////
$('iframe[src*="youtube.com"]').each(function() {
var url = $(this).attr("src")
$('iframe').css({'pointer-events':'auto', 'opacity':'1'});
$(this).remove( $(this).andSelf() ).wrapAll();
});
$('iframe[src*="vimeo.com"]').each(function() {
var url = $(this).attr("src")
$('iframe').css({'pointer-events':'auto', 'opacity':'1'});
$(this).remove( $(this).andSelf() ).wrapAll();
});
/////select wrapper/////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
$('select').each(function(){
$(this).add( $(this).andSelf() ).wrapAll('<div class="selectHolder"></div>');
})
});
////////next prev product animation on click////////////////////////////////////////////////////////////////
$('.next > a').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$("body").css("transition","all 0.5s ease");
$("body").css("opacity","0");
setTimeout(function(){
window.location = goTo;
},500);
});
$('.prev > a').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$("body").css("transition","all 0.5s ease");
$("body").css("opacity","0");
setTimeout(function(){
window.location = goTo;
},500);
});
}); //////// .ready end ///////////////////////////////////////////////////////////////////////////////////////
window.onload = function () {
/////iframe enabler/////
$('div.iframeHolder').click(function () {
$('iframe').css({'pointer-events':'auto', 'opacity':'1'});
});
}; //////// .onload end ///////////////////////////////////////////////////////////////////////////////////////
HEAD tag
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
| ↑ | ← |