djshiflet

Hey there!

My name is Dj Shiflet, I currently own numerous start up companies and am focusing on my own personal brand. You can visit my site here djshiflet.com - all built on the new fluid engine. My blog of resources and shop of digital products will be live later this week!
 
Looking forward to connecting 🙂

I would say good typography is key! 
From my perspective there is so much detail you can get into when it comes to assigning your font sizes, colors, and hierarchy. It also looks very professional and creative when done right. 

I would say good typography is key! 
From my perspective there is so much detail you can get into when it comes to assigning your font sizes, colors, and hierarchy. It also looks very professional and creative when done right. 

I am currently working on a website (7.1 blank template) where I am looking for that the header navigation links to change depending on the image that they scroll over (so for example on a light image we would like the text to be black, but as soon as the image is darker for the font to change to white).
 
I have been trying to solve this with css only :
/* Nav item color */
.header-nav-item a{
  color: transparent;
  filter: invert(1) grayscale(1) contrast(9);
}
 
Or with the color-Blend mode:
/* Nav item color */
.header-nav-item a{
  color: white !important;
  mix-blend-mode: multiply;
}
 
Any help would be appreciated.
 
 

Add this code to Settings > Advanced > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ var texts = document.getElementsByClassName('gallery-caption-content'); $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){ var text = texts[idx] var id = $(ele).attr('data-slide-url') if (text) { $(ele).append('<div id="' + id + '" class="light-caption">' + text.innerHTML + '</div>'); if ($(ele).attr('data-active')) { $(`#${id}`).css('visibility', 'visible') } } }) $('.gallery-masonry-lightbox-link').click(function() { var id = $(this).attr('href').split('=')[1] $('.light-caption').css('visibility', 'hidden') $(`#${id}`).css('visibility', 'visible') }) $('.gallery-lightbox').click(function() { $('.light-caption').css('visibility', 'hidden') var id = location.search.split('=')[1] $(`#${id}`).css('visibility', 'visible') }) }) </script> <style> .light-caption { visibility: hidden; } figcaption.gallery-caption.gallery-caption-grid-simple { display: none; } .gallery-lightbox-item[data-active='true'] .light-caption { visibility: visible; } .light-caption { background-color: rgba(0,0,0,0.5); display: block; width: 100%; padding: 10px; text-align: center; } figure:hover .light-caption { visibility: visible !important; } figure.gallery-lightbox-item { pointer-events: initial !important; } </style>  

@Falconer You can try adding the CSS below to the page
.gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: #fff; height: 100%; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before { background-color: rgba(0, 0, 0, 0.4); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s; } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before { opacity: 1; transition: all .5s; } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 1.3rem; } This will add the following effect:

z8f5SMZ9Is.mp4

Hey there!

My name is Dj Shiflet, I currently own numerous start up companies and am focusing on my own personal brand. You can visit my site here djshiflet.com - all built on the new fluid engine. My blog of resources and shop of digital products will be live later this week!
 
Looking forward to connecting 🙂

Hi MayaViolet,
👋 I'm the developer of the Automatic dark mode plugin for Squarespace. Will try to push you in the right direction.
To make the dark mode plugin, I've spent 3+ months solving this problem. My plugin switches between 2 themes, but the way I've coded it would work for multiple color themes as well.
Here's a video explanation on how I would solve this
 
Squarespace 7.1 color themes
Squarespace 7.1 has 10 different color themes that are easy to edit. The way they work is by adding a specific CSS class to the sections. 
Here are the CSS classes and matching color themes:
LIGHTEST 1: .white LIGHTEST 2: .white-bold LIGHT 1: .light LIGHT 2: .light-bold BRIGHT 1: .bright-inverse BRIGHT 2: .bright DARK 1: .dark DARK 2: .dark-bold DARKEST 1: .black DARKEST : .black-bold So basically, the way to code the functionality you're describing we would make a function that would add a specific css class to all sections on the page, thus making the entire page have a specific theme. The only smart way is to take advantage of the Squarespace 7.1 color themes!
This function would remove the "wrong classes" from each section:
// ℹ️ HELPER FUNCTION FOR REMOVING ALL THEME CLASSES EXCEPT DARK MODE CLASS var removeNonDarkModeClasses = function(){ var themeClasses = ['white', 'white-bold', 'light', 'light-bold', 'bright-inverse', 'bright', 'dark', 'dark-bold', 'black', 'black-bold']; //console.log("themeClasses: " + themeClasses); var filteredArray = themeClasses.filter(function(e) { return e !== darkModeClassName }) //console.log("other section classes but not dark mode class: " + filteredArray); $.each(filteredArray, function( index, value ) { darkmodeTargetedElements.removeClass(filteredArray[index]); }); }  
...this would add them back.
// ℹ️ HELPER FUNCTION FOR ADDING BACK THE THEME CLASS FOR EACH SECTION var addBackNormalNonDarkModeClass = function(){ darkmodeTargetedElements.each(function(){ $(this).addClass($(this).attr("data-section-theme")); console.log("Adding back section class: " + $(this).attr("data-section-theme")); $(this).addClass($(this).attr("data-header-theme")); console.log("Adding back header class: " + $(this).attr("data-header-theme")); }); }  
This would style all the sections with a specific class from the class list above
var darkmodeTargetedElements = $(".page-section, .header"); darkmodeTargetedElements.addClass(darkModeClassName);  
-Fenix
P.S. If you ever need help with advanced Squarespace coding, you can get in touch 🙂
P.P.S
You could also look into the source code of the soultwin.studio's website. ⛔️ Do not copy, it's not legal.  But you can inspect and get inspired. The javascript that makes that functionality looks like this:
(function ($) { $(document).ready(function () { /* Define vars ============================ */ const moods = [ { label: 'Editorial', fontFamily: 'SVG', fontSize: '8vw', letterSpacing: 0, color: 'f6f7f1', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0df1826d54b3c06ddfc87/1607524128469/Editorial.gif', }, { label: 'Venom', fontFamily: 'Font Select One', fontSize: device.mobile() ? '16vw' : '9.5vw', letterSpacing: device.mobile() ? '-3px' : '-8px', color: '657034', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0df5aab2d482295e9d729/1607524197530/Venom.gif', }, { label: 'Hot Embers', fontFamily: 'Font Select Three', fontSize: device.mobile() ? '12vw' : '8vw', letterSpacing: device.mobile() ? '-5px' : '-8px', color: 'F4663B', textTransform: 'uppercase', backgroundImage: 'https://static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0e0971c49363a9b566c4a/1607524514270/MOSHED-2020-12-7-21-37-46+2.gif', }, { label: 'Lilac', fontFamily: 'Font Select Nine', fontSize: device.mobile() ? '15vw' : '8.5vw', letterSpacing: '-4px', color: 'ECE1EF', textTransform: 'capitalize', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fc953f37fb1013a0d54db08/1607029747945/Lilac-09.jpeg', }, { label: 'Moonflower', fontFamily: 'Font Select Ten', fontSize: device.mobile() ? '15vw' : '9vw', letterSpacing: device.mobile() ? '-5px' : '-10px', color: '7197F8', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0defda4b4ef2db6b12671/1607524109876/Moonflower.gif', }, { label: 'Dream Pop', fontFamily: 'Font Select Eleven', fontSize: device.mobile() ? '13vw' : '8.5vw', letterSpacing: '-4px', color: 'FFCFAB', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0dee7b8bf0379e615c131/1607524080837/Dreampop.gif', }, { label: 'Library Card', fontFamily: 'Font Select Two', fontSize: device.mobile() ? '16vw' : '8.75vw', letterSpacing: 0, color: 'f4f1c0', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fc953e4c19741784c99d8b1/1607029733001/Banana-09.jpeg', }, { label: 'Passionfruit', fontFamily: 'Font Select Twelve', fontSize: device.mobile() ? '27vw' : '12vw', letterSpacing: '-10px', color: '5B2A3D', textTransform: 'capitalize', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0dffb28178304112e1a30/1607524356829/Passionfruit.gif', }, { label: 'Limelight', fontFamily: 'minerva-modern', fontSize: device.mobile() ? '14vw' : '10vw', letterSpacing: 0, color: 'E3F4D9', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fca42456a94db17e49c979d/1607090758096/Limelight-09.jpeg', }, ]; function autoType(elementClass, typingSpeed) { $('.cursor').remove(); $('.text-js').css('opacity', 0); var thhis = $(elementClass); thhis.prepend( '<div class="cursor" style="right: initial; left:0;"></div>' ); thhis = thhis.find('.text-js'); var text = thhis.text().trim().split(''); var amntOfChars = text.length; var newString = ''; setTimeout(function () { thhis.css('opacity', 1); thhis.prev().removeAttr('style'); thhis.text(''); for (var i = 0; i < amntOfChars; i++) { (function (i, char) { setTimeout(function () { newString += char; thhis.text(newString); }, i * typingSpeed); })(i + 1, text[i]); } }, 0); } /* Make Customizer Draggable *- and define options ============================ */ _.map(moods, function (key) { $('#colorPickerSelect').append(` <div class="flex flex-align-center colors cursor-pointer"> <div class="w-24 ht-24 cursor-pointer" data-size="${key.fontSize}" data-image="${key.backgroundImage}" data-color-label="${key.label}" data-text-transform="${key.textTransform}" data-font="${key.fontFamily}" data-let-sp=${key.letterSpacing} data-color="#${key.color}" style="background: #${key.color} content-box;"></div> <p class="font-7 no-transform font-size-12 m-l-spacer-md m-y-spacer-none no-transform let-sp-1 text-dark">${key.label}</p> </div> `); }); autoType('.type-js', 150); $('#colorPickerSelect, #customizer small').hide(); $('.pick-a-mood #handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#emptyColorState').remove(); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('pick-a-mood').addClass('picking-color'); }); $('.colorChosen #handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('colorChosen').addClass('picking-color'); $('#activeColorContainer').hide().remove(); }); $('#handle-minus').on('click', function () { $('#colorPickerSelect, #customizer small').slideUp(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#customizer') .addClass('colorChosen') .removeClass('picking-color') .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${ localStorage.getItem('activeColor') ? localStorage.getItem('activeColor') : '#f6f7f1' } content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${ localStorage.getItem('activeColorLabel') ? localStorage.getItem('activeColorLabel') : 'Editorial' }</p> </div> </div> `); }); const ACTIVECOLOREL = $('#colorPicker').find( `[data-color="${localStorage.getItem('activeColor')}"]` ); if (localStorage.getItem('activeColor') === ACTIVECOLOREL.data('color')) { ACTIVECOLOREL.parent().addClass('active').find('div').css({ borderColor: 'black', }); if (localStorage.getItem('activeFont') === 'SVG') { $('#logoText').hide(); $('#logoSVG').show(); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } else { $('#logoSVG').hide(); $('#logoText').show(); } } if (!_.isNil(localStorage.getItem('activeColor'))) { $('#photo-container #photo-wrapper').css({ backgroundImage: `url(${localStorage.getItem('activeImage')})`, }); $('#colorPickerSelect, #customizer small').hide(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer') .removeClass('colorChosen') .addClass('picking-color') .css({ backgroundColor: localStorage.getItem('activeColor') }); $('#activeColorContainer').fadeOut('fast').remove(); }); $('#customizer') .addClass('colorChosen') .removeClass('pick-a-mood picking-color') .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${localStorage.getItem( 'activeColor' )} content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${localStorage.getItem( 'activeColorLabel' )}</p> </div> </div> `); $('#main-container').css({ backgroundColor: localStorage.getItem('activeColor'), }); $('#logoText').css({ fontSize: localStorage.getItem('activeFontSize'), fontFamily: localStorage.getItem('activeFont'), letterSpacing: localStorage.getItem('activeLetSp'), textTransform: localStorage.getItem('activeTextTransform'), }); } else { $('#customizer').append(` <div id="emptyColorState" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center cursor-pointer"> <div class="w-24 ht-24 cursor-pointer" style="background: transparent content-box; border: 1px solid; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">Editorial</p> </div> </div> `); $('#handle-plus').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('colorChosen').addClass('picking-color'); $('#activeColorContainer').hide().remove(); }); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } if (localStorage.getItem('activeFont') === 'Font Select Nine') { device.mobile() ? $('#logoText').css({ wordSpacing: '25px' }) : $('#logoText').css({ wordSpacing: '50px' }); } else { $('#logoText').css({ wordSpacing: 0 }); } if (localStorage.getItem('activeFont') === 'Font Select Twelve') { device.mobile() ? $('#logoText').css({ lineHeight: 0 }) : $('#logoText').css({ lineHeight: 0.4 }); } else { device.mobile() ? $('#logoText').css({ lineHeight: 0.75 }) : $('#logoText').css({ lineHeight: 1 }); } $('.select-clientele').hover( function () { $(this).removeAttr('href'); $('.marquee').show(); }, function () { $('.marquee').hide(); } ); $('#colorPickerSelect .colors').on('click', function () { let color = $(this).find('div').data('color'); let fontFamily = $(this).find('div').data('font'); let fontSize = $(this).find('div').data('size'); let letterSpacing = $(this).find('div').data('let-sp'); let textTransform = $(this).find('div').data('text-transform'); let backgroundImage = $(this).find('div').data('image'); var v = $(this).find('p').text(); if (fontFamily === 'SVG') { $('#logoText').hide(); $('#logoSVG').show(); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } else { $('#logoSVG').hide(); $('#logoText').show(); } localStorage.setItem('activeColor', color); localStorage.setItem('activeColorLabel', v); localStorage.setItem('activeFont', fontFamily); localStorage.setItem('activeFontSize', fontSize); localStorage.setItem('activeLetSp', letterSpacing); localStorage.setItem('activeTextTransform', textTransform); localStorage.setItem('activeImage', backgroundImage); $(this).toggleClass('active').siblings().removeClass('active'); if ($(this).hasClass('active')) $(this).find('div').css({ borderColor: 'black' }); $('#main-container').css({ backgroundColor: color }); $('#logoText').css({ fontFamily, fontSize, letterSpacing, textTransform, }); if (fontFamily === 'Font Select Nine') { device.mobile() ? $('#logoText').css({ wordSpacing: '25px' }) : $('#logoText').css({ wordSpacing: '50px' }); } else { $('#logoText').css({ wordSpacing: 0 }); } if (fontFamily === 'Font Select Twelve') { device.mobile() ? $('#logoText').css({ lineHeight: 0 }) : $('#logoText').css({ lineHeight: 0.4 }); } else { device.mobile() ? $('#logoText').css({ lineHeight: 0.75 }) : $('#logoText').css({ lineHeight: 1 }); } autoType('.type-js', 150); $('#photo-container #photo-wrapper').css({ backgroundImage: `url(${backgroundImage})`, }); if (!$('#customizer').hasClass('colorChosen')) { $('#colorPickerSelect, #customizer small').slideUp(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#customizer') .addClass('colorChosen') .removeClass('picking-color') .css({ backgroundColor: color }) .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${color} content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${v}</p> </div> </div> `); } }); }); })(jQuery);  

Hey, all. I figured it out. Here's the code if you need it. Also, I added some JS to put the blog posts in alphabetical. If you'd like me to drop that in here, let me know. 
.archive-item { display: flex; width: auto; } .archive-item-link:after { display: flex; content: ''; width: 0px; height: 3px; transition: width .5s ease; } .archive-item-link:hover:after { width: 100%; background: black; }  

Add to Home > Settings > Advanced > Code Injection > Footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-nav-folder-title[href="/services-1"]').click(function() { window.location = "/services"; }); }); </script>  

Do this. And we will check & give the code

Okay, so after searching for the 50th time, I somehow stumbled across this Q&A that I hadn't seen before. So tweaking that, I got:
Header:
<div class="logoload"></div> <style> .logoload {   /* SET BACKGROUND COLOR */   background-color: #E6E4E8;   /* SET BACKGROUND SIZE */   background-size: 1000px;   position: fixed;   left: 0px;   top: 0px;   width: 100%;   height: 100%;   z-index: 9999;   background-position: center;   background-repeat: no-repeat; } </style> <span id="top"></span> Footer:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript">     $(document).ready(function() {      var arr = ["https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7c90a287971afb84858/1626073033610/LP+quote+1.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7ccaa30721e650da8c5/1626073036294/LP+quote+2.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d2f229ba2ea8557b8e/1626073042282/LP+quote+3.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d4dc37083541d6b11d/1626073044510/LP+quote+4.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d6c22c005c93572b3a/1626073046893/LP+quote+5.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d9aa30721e650da8da/1626073049297/LP+quote+6.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7db320dbd0de29ebff0/1626073051316/LP+quote+7.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7dd66be7e490f2e65a8/1626073053378/LP+quote+8.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e0787dde1a90cc9e70/1626073056313/LP+quote+9.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e419a9f87deb91cefd/1626073060561/LP+quote+10.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e7566ded7d61cab84d/1626073063392/LP+quote+11.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7ea2f3c4128e1a8c7e1/1626073066224/LP+quote+12.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7edf4fe78435a5864d4/1626073069328/LP+quote+13.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f0f4fe78435a5864d5/1626073072035/LP+quote+14.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f22f3c4128e1a8c7ef/1626073074813/LP+quote+15.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f52c5c2f6215e738b9/1626073077525/LP+quote+16.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f892abcc18c414639a/1626073080218/LP+quote+17.png",     ];      document.querySelector(".logoload").style.backgroundImage = "url('"+arr[Math.floor(Math.random() * arr.length)]+"')"; });    $(window).load(function() {     $(".logoload").delay(500).fadeOut("slow"); }) </script> It works! Except, it doesn't look right on mobile, and I want to disable it for mobile. That brings me to the question I asked here: is there a way to disable that javascript code for mobile devices?

Some CSS Class/ID for Squarespace 7.1
Announcement Bar
Announcement bar: .sqs-announcement-bar-dropzone Announcement bar text: .sqs-announcement-bar-dropzone p Announcement bar link: .sqs-announcement-bar-dropzone a Announcement Bar Close Icon: .sqs-announcement-bar-close OR .sqs-announcement-bar-close:after Header
Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) Header (when burger menu is open): body.header--menu-open header#header Header (when burger menu is close): body:not(.header--menu-open) header#header Site Title: a#site-title Site Title (when overlay menu open): .header--menu-open a#site-title Site Title (when overlay menu close) body:not(.header--menu-open) a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation First Item: .header-nav-item:nth-child(1) a Navigation Second Item: .header-nav-item:nth-child(2) a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Navigation Folder Title: a.header-nav-folder-title Mobile Navigation Items: .header-menu-nav-item a Mobile Navigation First Item: .header-menu-nav-folder[data-folder="root"]>div>div:first-child Mobile Navigation First Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:first-child a Mobile Navigation Second Item: .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) Mobile Navigation Second Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: body.header--menu-open .burger-inner>div Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Header Button: header#header a.btn Header Desktop Button: .header-display-desktop a.btn Header Mobile Button: .header-menu-cta a a Footer
Footer: footer#footer-sections Footer Social Icons:  footer#footer-sections  .sqs-svg-icon–outer Footer Links: footer#footer-sections a Product List
Product List: .collection-type-products.view-list Product Name: .grid-title Product Price: .grid-prices Product Image: figure.grid-image Product Currency: body.native-currency-code-usd .sqs-money-native:before Sold Out Text: .product-mark.sold-out Product Detail
Product Detail: .collection-type-products.view-item Product Breadcrumb: .ProductItem-nav-breadcrumb Product Pagination (Previous/Next): .ProductItem-nav-pagination Gallery: figure.ProductItem-gallery Thumbnails: .ProductItem-gallery-thumbnails Big Image: .ProductItem-gallery-slides Product Name: h1.ProductItem-details-title Price: .ProductItem-product-price Currency: body.native-currency-code-usd .sqs-money-native:before Excerpt: .ProductItem-details-excerpt Add to Cart Button: .sqs-add-to-cart-button-wrapper Add to Cart Text: .sqs-add-to-cart-button-inner Variant Dropdown: .variant-option Variant Title: .variant-option-title Variant Options: .variant-select-wrapper option Quantity Text: .quantity-label Quantity Input: .product-quantity-input Cart Page
Cart Page: body#cart Cart Page Title: .cart-title Product Name: a.cart-row-title Product Thumbnail: div.cart-row-img Qty minus: .cart-row-qty-dec Qty plus: button.cart-row-qty-inc Qty number: input.cart-row-qty-input Price: .cart-row-price X icon: .cart-row-remove or .cart-row-remove svg Sub total text: .cart-subtotal-label span Sub total price: .cart-subtotal-price Checkout Button: button.cart-checkout-button   Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Blog List
Blog List: [class*="type-blog"].view-list Thumbnails: article.blog-item img Date: time.blog-date Category: span.blog-categories-list Title: h1.blog-title Excerpt: .blog-excerpt Read more: a.blog-more-link Blog Posts
Blog Posts Page: [class*="type-blog"].view-item Blog Items: .blog-item-entry Categories: .blog-meta-item–categories Date: time.dt-published.blog-meta-item.blog-meta-item–date Author: .blog-meta-item.blog-meta-item–author.p-author.author Title: .blog-item-title Content: .blog-item-content-wrapper Pagination: .item-pagination Pagination Arrows: .item-pagination-link .item-pagination-icon Pagination Title: h2.item-pagination-title Author Box: .blog-item-author-profile-wrapper Author Image: a.author-avatar.content-fill Author Name: .author-name Author Site: a.author-website Post Comment: .squarespace-comments Post Comment Button: .comment.btn Comment Input: .squarespace-comments .new-comment-area Preview: span.btn-text.preview-comment.top-level-preview-btn Subscribe via email text: span.subscribe.subscribe-control Blog Grid
updating
Blog Masonry
updating
Event List Page
Event List Page: .collection-type-events.view-list Event Thumbnail: a.eventlist-column-thumbnail.content-fill Event Time: .eventlist-datetag Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month Event Title: h1.eventlist-title Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item Event Description: .eventlist-description Event Detail Page
Event Detail Page: .collection-type-events.view-item Event Title: h1.eventitem-title Event Date: time.event-date Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item Event Description: .eventitem-column-content Event Pagination: section.item-pagination.item-pagination–prev-next Previous/Next: .item-pagination-link .item-pagination-prev-next Event Pagination Title: h2.item-pagination-title Portfolio
title: h3.portfolio-title item: .portfolio-grid-basic portfolio image: .portfolio-grid-basic .grid-image pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination pagination text: h2.item-pagination-title pre text: .item-pagination-link–prev .item-pagination-prev-next next text: .item-pagination-link–next .item-pagination-prev-next List Simple
List Simple: .user-items-list-simple Image: .user-items-list-simple img First Item: .user-items-list-simple li:nth-child(1) Second Item: .user-items-list-simple li:nth-child(2) List Content: .user-items-list-simple .list-item-content Title: .user-items-list-simple h2.list-item-content__title Description:  .user-items-list-simple list-item-content__description OR .user-items-list-simple p List Slideshow
List Slideshow: .user-items-list-banner-slideshow Image: .user-items-list-banner-slideshow img First Item: .user-items-list-banner-slideshow li:nth-child(1) Second Item: .user-items-list-banner-slideshow li:nth-child(2) List Content: .user-items-list-banner-slideshow .slide-content Title: .user-items-list-banner-slideshow h2.list-item-content__title Description:  .user-items-list-banner-slideshow list-item-content__description OR .user-items-list-banner-slideshow p Arrow Circles: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button Arrow Icons: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button svg Button: .user-items-list-banner-slideshow .list-item-content__button List Carousel
List Carousel: .user-items-list-carousel__slides Image: .user-items-list-carousel__slides img First Item: .user-items-list-carousel__slides li:nth-child(1) Second Item: .user-items-list-carousel__slides li:nth-child(2) List Content: .user-items-list-carousel__slides .list-item-content Title: .user-items-list-carousel__slides h2.list-item-content__title Description:  .user-items-list-carousel__slides list-item-content__description OR .user-items-list-carousel__slides p Arrow Circles: .user-items-list-carousel__arrow-button Arrow Icons: .user-items-list-carousel__arrow-button svg Button: .user-items-list-carousel__slides .list-item-content__button Fluid Engine
Fluid Block (text block, image...): Each block is wrapped by the same class name .fe-block and a unique id. And All .fe-blocks will be wrapped by a parent tag with a class name of .fluid-engine
 
Checked & Wrote by tuanphan

Site URL: https://www.davidjackspencer.co/
I have successfully created a custom cursor using the code below, but cannot figure out how to add a delay to the cursor movement like this example here: https://codepen.io/ciprian/pen/BazvjRZ
I've posted this in Settings > Advanced > Header 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> And this in Settings > Advanced > Footer
<script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.pageX, top: e.pageY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } ); </script> After doing that I've also pasted this in Design > Custom CSS
@media ( hover: none ) { .cursor { display: none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: absolute; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* This line is for the circle to invert Delete this line if you dont want the circle to invert */ transition: width 0.8s, height 0.7s, background-color 0.9s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 60px; background-color: #ffffff; }
Any help would be greatly appreciated!