ESHOP - With homepage |
← |
Additional modules used in preview: eshop, all lite catalogue modules, search, newsletter, additional languages, advanced slideshow, questions & answers, client zone, 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 CURRENCIES BLOCK ICONIZER - DEMO SETINGS*/
/************************************************/
/*Make a standart selectbox invisible. Dont forget to change an icon on: Eshop settings - Eshop Currencies. Dont forget to change an icon*/
div.widthClip div.eCurrencies select { background-color: transparent; border: 1px solid #fff; font-size: 100%; height: 32px; width: 100%; opacity: 0;}
/************************************************/
/*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*/
/******************************************/
/*LANGUAGES SELECT ICONIZER - DEMO SETINGS*/
/******************************************/
/*Make a standart languages selection look like a dropdown. Dont forget to change an icon on: Lang.↑ - Language container background */
div.header_cont ul.languages {background-size:32px auto; overflow:hidden;box-sizing: border-box;z-index: 101;padding-top: 33px;}
div.header_cont ul.languages li:hover a {opacity:0.6;}
div.header_cont ul.languages:hover {height:auto; background-color:#fff !important; overflow:visible; padding-top: 33px;}
/*************************************/
/*CLIENT ZONE ICONIZER - DEMO SETINGS*/
/*************************************/
/*Make a standart client zone look like an icon. Dont forget to change an icon on: Client Zone - Block↑ background */
/*Warning - some languages requires to edit "Access client zone" title on CMS front-ent languages editor.*/
div.header_cont div.user_zone {background-size:32px auto;}
div.header_cont div.widthClip div.user_zone b {display:none;}
div.header_cont div.user_zone a {display:none;}
div.header_cont div.user_zone:hover a {display:block; line-height:94%; background-color:#fff; height:32px; width:40px; word-wrap: normal;}
/******************************************************************/
/*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%;}
/************************/
/* LABELS ON PRODUCTS */
/************************/
span.popularTip {background-color:#D49641 ; border: 2px solid #D49641; color: white; font-weight:normal;}
span.newTip {background-color: #36344A; border: 2px solid #36344A; color: white; font-weight:normal;}
span.saleTip {background-color: #824A49; border: 2px solid #824A49; color: white; font-weight:normal;}
/**** **** **** **** **** **** **** ****/
/**** LAYOUT/DEFAULT RELATED CSS ****/
/**** **** **** **** **** **** **** ****/
/****************************************************/
/*ESHOP LAYOUT - DISABLE RIGHT COLUMN - DEMO SETINGS*/
/****************************************************/
table.eshopSideBlocks td.rightBlock {display: none;}
/********************************************************************************************************************************************/
/*ESHOP (Catalogue) HOMEPAGE LAYERS LAYOUT - DARK BACKGROUND(layer preset), CUSTOM LAYER ITEMS STYLE. "div#layer10" is a individual layer ID*/
/***********************************************************************************-********************************************************/
div#layer10 div.cat_list div.mthumb div.title {background-color:transparent; border-bottom: medium none;} /*disable title background and border*/
div#layer10 div.cat_list div.mthumb div.title a {color: #fff;} /*change product title color*/
div#layer10 div.title.header a.cap {color: #fff;} /*change layer title color*/
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'>
| ↑ | ← |