Full width content |
← |
Preview: start10.webtool.lt
Additional modules used in preview: eshop, all lite catalogue modules, search, additional languages, 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;}
/*******************************************************/
/*ESHOP (Catalogue) PRODUCTS ON STARPAGE - DEMO SETINGS*/
/*******************************************************/
/*Make first 3 catalog product list items bigger. Remove ".startpage" to make it everywhere on website */
.startpage .it150 div.prod_list div.mthumb {width: 23.75% !important;}
.startpage .it150 div.prod_list div.mthumb:nth-child(1) {width: 32% !important;}
.startpage .it150 div.prod_list div.mthumb:nth-child(2) {width: 32% !important;}
.startpage .it150 div.prod_list div.mthumb:nth-child(3) {width: 32% !important;}
/********************************************************************************************************************************************/
/*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*/
/******************************************************************/
/*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: white; border: 2px solid #D49641; color: #D49641; font-weight:bold;}
span.newTip {background-color: white; border: 2px solid #36344A; color: #36344A; font-weight:bold;}
span.saleTip {background-color: white; border: 2px solid #824A49; color: #824A49; font-weight:bold;}
/**** **** **** **** **** **** **** ****/
/**** LAYOUT/DEFAULT RELATED CSS ****/
/**** **** **** **** **** **** **** ****/
/*Disable Shop Columns*/
.eshopSideBlocks td.leftBlock, .eshopSideBlocks td.rightBlock {display:none;}
/*Products*/
div.prod_list {width:100vw; left:50%; margin-left:-50vw;}
div.prod_list div.mthumb {width:19% !important;height: 37vh;}
div.prod_list div.mthumb a.thumb {height: 33vh;}
/*Mobile Products*/
.mobileLayout div.prod_list {width:100%; left:0%; margin-left:0vw;}
.mobileLayout div.prod_list div.mthumb {width:100% !important; height:auto;}
.mobileLayout div.prod_list div.mthumb a.thumb {height:300px;}
/*Categories*/
div.cat_list {width:100vw; left:50%; margin-left:-50vw;}
div.cat_list div.mthumb {width:24% !important;height: 47vh;}
div.cat_list div.mthumb a.thumb {height: 43vh;}
/*Mobile Categories*/
.mobileLayout div.cat_list {width:100%; left:0%; margin-left:0vw;}
.mobileLayout div.cat_list div.mthumb {width:100% !important; height:350px}
.mobileLayout div.cat_list div.mthumb a.thumb {height:300px;}
/*News*/
div.news_block_list {width:100vw; left:50%; margin-left:-50vw;}
div.news_block_list div.news_block {width:19% !important;/*height: 37vh;*/float: left;}
/*News style*/
div.news_block {float: left;width: 49%; margin-right: 1%; padding: 20px; box-sizing:border-box;}
div.news_block div.thumb_side {width:100%;padding-right: 0;}
div.news_block div.thumb_side a {height:210px;}
div.news_block div.data_side {padding-left: 0%; width: 100%;}
/*Mobile news*/
.mobileLayout div.news_block_list div.news_block {width:100% !important;}
/*Photo albums*/
div.albumList {width:100vw; left:50%; margin-left:-50vw;}
div.albumList div.album_block {width:19% !important;/*height: 37vh;*/float: left;}
/*Photo gallery style*/
div.album_block {margin-right: 1%; padding: 20px; width: 32%;}
div.album_block div.thumb_side {width:100%;padding-right: 0;}
div.album_block div.data_side {padding-left: 0%; width: 100%;}
/*Mobile albums*/
.mobileLayout div.albumList div.album_block {width:100% !important;}
/*inner*/
div.rproducts div.prod_list {left: 0; margin-left: 0; width: auto;}
/*additional*/
div.layers_cont div.layer table.layer tr td a.cap { text-align: center;}
div.prod_list div.mthumb span.newTip, div.prod_list div.mthumb span.saleTip, div.prod_list div.mthumb span.popularTip {text-transform: uppercase;}
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/////
$('.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'>
| ↑ | ← |