Changes in Stunter website (step 2)
1. Adding the classname "nieuweKlantForm" to the file *cart_modal_login.php* in line 29.
```
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="cartLoginBlock">
<h3 exedit="{type:form,id:748,field:form_title,contenttype:tinymce,toolbar:custom}">%%F_VAR_FORM_TITLE(form=748)%%</h3>
<h5 exedit="{type:form,id:748,field:form_subtitle,contenttype:tinymce,toolbar:custom}">%%F_VAR_FORM_SUBTITLE(form=748)%%</h5>
<div class="form-registration nieuweKlantForm">
<p class="reg-msg" style="display:none;color:red;" exedit="{type:edition,id%%E_ID%%,field:e_var_registration_msg,contenttype:tinymce,toolbar:custom}">%%E_VAR_REGISTRATION_MSG%%</p>
<?=$page['formmarker_1']?>
<style>
#agree_msg .fq_input_agree_msg {
padding: 1px;
}
</style>
</div>
</div>
</div>
```
2. Adding this css to the file *cart_v2.css*
```
@media only screen and (max-width: 438px) {
#cartPage-content.cart-v2 .cartblock .cart-form form #submitbuttonUserdata {
padding: 16px 20px;
}
}
@media only screen and (max-width: 767px) {
#loginModal {
z-index: 10050;
}
#cartPage-content.cart-v2 .cartblock .cart-form {
padding: 14px 20px;
}
#formUserdata #company {
width: e("calc(100vw - 100px)");
}
#cartPage-content.cart-v2 .cart-step-done .cart-p-item .product-cart-text {
padding-left: 50px;
}
#fq6289fqv2177div, #fq6289fqv2176div {
display: flex;
align-items: baseline;
}
#fq6289fqv2177div {
margin-top: 8px;
}
#fq6289fqv2177div input, #fq6289fqv2176div input {
margin: 9px 8px 0px 0px;
}
.fq_input_country #fq_country {
display: block;
font-size: 1.2em;
font-family: sans-serif;
font-weight: normal;
color: #444;
line-height: 1.3;
padding: 0.6em 1.4em .6em .8em;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: 6px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236e6962%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #f5f5f5 0%,#f5f5f5 100%);
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
.fq_input_country #fq_country::-ms-expand {
display: none;
}
.fq_input_country #fq_country:hover {
border-color: #888;
}
.fq_input_country #fq_country:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
.fq_input_country #fq_country option {
font-weight:normal;
}
*[dir="rtl"] .fq_input_country #fq_country, :root:lang(ar) .fq_input_country #fq_country, :root:lang(iw) .fq_input_country #fq_country {
background-position: left .7em top 50%, 0 0;
padding: .6em .8em .5em 1.4em;
}
.fq_input_country #fq_country:disabled, .fq_input_country #fq_country[aria-disabled=true] {
color: graytext;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.fq_input_country #fq_country:disabled:hover, .fq_input_country #fq_country[aria-disabled=true] {
border-color: #aaa;
}
#cartPage-content.cart-v2 .cartblock .cart-form form #submitbuttonUserdata {
margin-top: 9px;
}
}
```
3. Adding this css to the file *zws_17_1.css*
```
@media only screen and (max-width: 767px) {
.headerFixed{
position: fixed !important;
top: 0;
width: 100%;
left: 0;
background-color: white;
top: -200px;
transition: top 0.5s;
}
.headerFixedActive {
top: 0;
}
.startblocksFixed, .breadcrumbsFixed {
margin-top: 162px;
}
}
```
4. Adding this scripts to the file *stunter.min.js*
```
$(document).ready(function(){
var doc = document.documentElement;
var w = window;
var prevScroll = w.scrollY || doc.scrollTop;
var curScroll;
var direction = 0;
var prevDirection = 0;
var checkScroll = function() {
curScroll = w.scrollY || doc.scrollTop;
if (curScroll > prevScroll) {
//scrolled up
direction = 2;
}
else if (curScroll < prevScroll) {
//scrolled down
direction = 1;
}
if (direction !== prevDirection) {
toggleHeader(direction, curScroll);
}
prevScroll = curScroll;
};
var toggleHeader = function(direction, curScroll) {
var scrollPosition = $(window).scrollTop();
if (direction === 2) {
$('#header').removeClass('headerFixed');
$('.startblocks').removeClass('startblocksFixed');
$('#breadcrumbs').removeClass('breadcrumbsFixed');
$('#header').removeClass('headerFixedActive');
prevDirection = direction;
}
else if (direction === 1) {
if (scrollPosition > 200) {
$('#header').addClass('headerFixed');
$('.startblocks').addClass('startblocksFixed');
$('#breadcrumbs').addClass('breadcrumbsFixed');
setTimeout(function() {$('#header').addClass('headerFixedActive');}, 200);
prevDirection = direction;
}
}
};
window.addEventListener('scroll', checkScroll);
$('div:not(#minicart-button, #minicart-content)').click(function() {
$("#minicart-button").removeClass("active");
$("#minicart-content").slideUp(150);
})
});
```
Google Drive
Gist
Clipboard
Sign in with Wallet
