Snippets

Exclude IP address from analytics

To allow anyone on your site (usually beta testers or internal users) to exclude themselves from analytics, you can have them visit this page and use the button below. With this method, similar to above, the page would need to be visited and enabled per domain and per browser, for every user.

🚨 This only works for Plausible analytics.

Plausible Exclude

Click the button below to toggle your exclusion in analytics for this site

You currently are not excluding your visits.
Exclude my visits

Custom code

You can paste this HTML Embed componnet in the bottom of a page, in the footer for exemple. It provides a more accurate preview inside Webflow designer by executing some of the custom code (HTML & CSS only), that would be visible only on live version of the website.
‍
To access the custom code, look for it at the bottom left corner of this container, just below this text. It can also be found at the same place in the footer element.

Google Material Icons


<!-- Integration of MATERIAL ICON FONT -->
<!-- Use by typing icon name in a text block/text span.
Then apply css class : "material-icons". 
To find icon name list, go to : https://material.io/resources/icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Font Awesome


<!-- Import FONT AWESOME -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/solid.css" integrity="sha384-LA8Ug4T/nhVkyhrSmSirsoAo9iDrBk8E7U80aSPeD+w3vO8PzOJIS6agGcbIwwX0" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/brands.css" integrity="sha384-V5Z1KgRRJyY878qCx7+zUeTDm0FgjoYrbmSortFqRPGz+Ue6XDe4uIiMqB3tB/wd" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/fontawesome.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">

Scrollbar


/** GLOBAL SCROLLBAR **/

/* width */
::-webkit-scrollbar {
  width: 16px;
  height: auto;
}
/* Track */
::-webkit-scrollbar-track {
	background: #ffe5bf;
}
/* Handle */
::-webkit-scrollbar-thumb {
	border-radius: 20px;
	-webkit-border-radius: 20px;
  background: #251c4d;
  border: 6px solid #ffe5bf;
  margin: 6px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #3B3B49;
}
/* Scrollbar arrow buttons */
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
/* H & V Scrollbars Corner */
::-webkit-scrollbar-corner {
  background-color: transparent;
}

Text selection


/** TEXT SELECTION COLOR **/

::selection {
 background: rgba(62, 135, 178, 0.6); /* WebKit/Blink Browsers */
 color: #F2F9FF;
}
::-moz-selection {
 background: rgba(62, 135, 178, 0.6); /* Gecko Browsers */
}

Text area resize


/** TEXT AREA RESIZE **/

textarea {
 resize: none; /* Set to "vertical" to allow textarea height resize */
}

Font smoothing


/** FONT SMOOTHING aka Antialiasing Correction **/

/*Middle smoothing level, works in 99% cases*/
body {
 -webkit-font-smoothing: antialiased; /*Webkit Browsers*/
 -moz-font-smoothing: antialiased; /*Firefox*/
 -o-font-smoothing: antialiased;
 text-rendering: optimizeLegibility; /*Chrome & Safari*/
 -moz-osx-font-smoothing: grayscale; /*Firefox*/
 font-feature-settings: 'liga'; /*Internet Explorer*/
 
 font-variant-ligatures: none;
}

Trim text


/** TRIM TEXT */

/* Trunc text based on a defined number of lines */
.trunc-text {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.trunc-text.tiny {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.trunc-text.large {
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

Anchor links offset


/* Add offset on scroll for section/anchor links */
.section {
  scroll-margin-top: 80px;
}

Hide horizontal scrollbar


.overflow-x-hidden {
  max-width: 100vw;
  overflow-x: clip;
}

Disable all clicks


/* Snippet prevents all click and hover interaction with an element */
.clickable-off {
  pointer-events: none;
}

Highlight JS styling


pre {
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  border-radius: 5px;
    
  margin: 0px;
}

.hljs {
	background-color: #282537 !important;
  padding: 0em 60px 1em 1em !important;
}

Browsers fixes


/*Hide focus outline for main content element*/
main:focus-visible {
	outline: -webkit-focus-ring-color auto 0px;
}

/*Hide focus outline on Safari when anchor links are used to go to a section*/
*:focus {
	outline: none;
}

Webflow classes fixes


/* Snippet gets rid of top margin on first element in any rich text*/
.w-richtext>:first-child {
	margin-top: 0;
}

/* Snippet makes all link elements listed below to inherit color from their parent */
a, 
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link
{
color: inherit;
}