Body

Disable default iOS form styling

Override the default iOS form styling
1. Custom code | Header code

input, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; border-radius: 0; }

1. This needs to be done

On tablet and mobile media queries, set the border to 0 px. You might need to arrow up to 1 px and then back to 0 px again for it to work properly.

Disable blue hyperlink on iOS

Override the default iOS blue hyperlink that occurs on dates and phone numbers.
1. Custom code | Header code

.footer-contact-block a {
color: #e4e8eb !important;    
}

1. This needs to be done

Change class name to your class name.

Body - Prevent right click in browser

Disable right click on your webpage.
1. Custom code | footer code

var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false")

Body - Disable zoom on mobile device

Disable zoom on webpages in mobile devices
1. Custom code | footer code

meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”

Body – Make phone number non-clickable on mobile

Disable phonenumbers to be clicked on mobile devices
1. Custom code | footer code

meta name=”format-detection” content=”telephone=no”

Body – change scroll speed

Change the speed of scroll on body or individual elements

1. These are the values

data-scroll-time = 0 - will scroll immediately to the element with no delay. 
data-scroll-time = 0.75 - will scroll a little faster than the default 
data-scroll-time = 1 - will scroll just as fast as usual 
data-scroll-time = 1.25 -  will scroll a little faster than the default 
data-scroll-time = 2  - will scroll twice as slow as usual 
data-scroll-time = 20 - will enable TurtleMode™

This can be set on the body itself to affect the whole site, or just individual elements (like sections, div, etc) that you are scrolling to. This means that you can have one default scroll speed for all links on the page, with a specific override for one or more individual elements.

1. webflow designer

data-scroll-time = 0
data-scroll-time = 0.75
data-scroll-time = 1
data-scroll-time = 1.25
data-scroll-time = 2 
data-scroll-time = 20

1. Select the body or an element

Go to the "Settings" panel.

2. Go down to "Custom attributes"

Paste text data-scroll-time in the Name field.
Paste the value in the field Value.

JavaScript – Document Write-In

An error message will be shown when pasting  some codes starting with script. That makes the Custom Code unsavable after changes, so a document Write-in needs to be inserted instead.

1. This needs to be done

You’ll get a error message when pasting this code. Once pasted in the Custom code area, be sure to replace all quote marks. The quotation marks in the designer are not the same as in the Custom Code-area.

1. Custom code | Footer code

1. Paste code

<script language="JavaScript”>
<!--
document.writeln("<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyA4y1ZR_U6_ZfDdPpH1eBV5zAWGzczmaus&sensor&sensor=false&extension=.js'></script>”);
//-->
</script>

Text – Disable copy and paste of text

This protects your content from being copied and/or saved.
1. Custom code | Head code

1. Paste code

ondragstart=”return false” onselectstart=”return false”

Text – Prevent flashing text in Safari

When using interactions the text will sometimes flash for 1/2 second in Safari. This prevent the flashing.
1. Custom code | Head code

1. Paste code

/* Safari & Webkit blinking fix */
.class, .class1, .class2 {
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased !important;
font-smoothing: antialiased !important;
-webkit-transform: translateZ(0) scale(1.0, 1.0); transform: translateZ(0); }

Text – Change text highlight color

This code customizes the highlight color shown when you select text in the browser.
1. Custom code | Head code

1. Paste code

::-moz-selection { /* Firefox */  color: #ffffff;       
 background: #fa5bd3;    }   

 ::selection {color: #ffffff;        
background: #fa5bd3;    }

Viewport – 1200 px width

A wider viewport than the default 960px desktop media query in Webflow
1. Custom code | Head code

1. Paste code

@media screen and (min-width: 1200px) {
.w-container {
max-width: 1170px; }
}

c
o
n
t
a
c
t

Got some cool stuff to be listed here? Get in touch!

THANK YOU!
I’ll try to get back to you as soon as I can. Cheers!

Oops!
Please fill all required fields, bitte!