Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet

Location: site_wide_header

Progress Bar Javascript

// progress-bar.js document.addEventListener(‘DOMContentLoaded’, function() { document.querySelectorAll(‘.bar-group’).forEach(function(bar) { const range = parseInt(bar.getAttribute(‘data-range’), 10); const current = parseInt(bar.getAttribute(‘data-current’), 10); const percentage = (current / range) * 100; bar.querySelector(‘.progress-fill’).style.width = percentage + ‘%’; }); });Continue reading

Colour Switch – Sync with Device Colour Scheme

// Function to apply the color scheme function applyColorScheme(scheme) { if (scheme === ‘dark’) { document.documentElement.classList.add(“us-color-scheme-on”); document.querySelector(‘input[name=”us-color-scheme-switch”]’).checked = true; } else { document.documentElement.classList.remove(“us-color-scheme-on”); document.querySelector(‘input[name=”us-color-scheme-switch”]’).checked = false; } } // Detect the preferred color scheme const prefersDarkScheme = window.matchMedia(“(prefers-color-scheme: dark)”).matches; if…Continue reading

Menu Item image Animation on Hover

.header-navigation .menu .menu-item:hover { background: url(https://ecommerce-base-1.instawp.xyz/wp-content/uploads/2024/05/Plan-De-Travail-14_7png.webp) no-repeat; background-size: contain; background-position: center; transition: 0.5s; }Continue reading

Chat text

.chat-form-control { max-height: 90px; font-size: 2rem; line-height: 1.5; border-radius: 0.25rem; background-color: #f7f7f9; border-color: #e1e3e6; box-shadow: none; width: 100%!important; max-width: 100%!important; transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out; resize: vertical; }Continue reading

like dislike button margin

div.kodex_buttons { margin-top: -40px; /* Reduced top and bottom padding */ margin-bottom: -20px; /* Reduced top and bottom padding */ border: 0px solid #ccc; /* Add a border to see the effect */ } span.icon { display: inline-block; /* Adjust…Continue reading

Hide the Submit Button on Calculator Forms

/** * For the Accordion Template, this is a helper script * * For support, please visit: https://www.facebook.com/groups/wpformsvip */ /* CSS hide submit button for any calculator only forms */ button.wpf-calc-form { visibility: hidden; }Continue reading