Everything looks fine for about twelve seconds. Then the contact forms stop submitting. No error message. No console warning. Just… ...
Someone just exploited a hole in WordPress core that lets them take over your server without logging in. Here's what ...
Updated Elementor and your site broke? I walk through the actual fixes that worked when it happened to a client ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
Here are the images I used for the cursor:
The Following code goes into Elementor -> Custom code:
<style>
body {
cursor: none!important; /* Default system cursor */
}
a , button {
cursor: none!important; /* Hide the default pointer cursor on links */
}
a:hover .custom-cursor,
button:hover .custom-cursor {
transform: scale(1.8)!important; /* Enlarge cursor when hovering over links or buttons */
}
.custom-cursor {
position: fixed;
top: 0;
left: 0;
width: 32px; /* Default size */
height: 32px;
background: url('********* CURSOR IMAGE ONE **********') no-repeat center;
background-size: contain;
pointer-events: none;
transform: translate(-0%, -0%);
transition: background 0.3s ease, transform 0.3s ease;
z-index: 9999999;
transform-origin: center center; /* Ensures rotation happens around the center */
animation: rotateDiagonal 3s linear infinite; /* Animation for continuous rotation */
will-change: transform, box-shadow;
}
.cursor-shadow {
position: fixed;
top: 0;
left: 0;
width: 30px;
height: 30px;
background: url('********* CURSOR IMAGE ONE **********') no-repeat center;
background-size: contain;
border-radius: 50%;
filter: blur(4px) opacity(0.7); /* Stronger blur effect */
animation: rotateDiagonal 3s linear infinite; /* Animation for continuous rotation */
z-index: 9999997; /* Behind the cursor */
pointer-events: none; /* Ensure the shadow doesn't interfere with other elements */
}
/* Keyframes for diagonal spin (rotate3d on X, Y, Z axes) */
@keyframes rotateDiagonal {
0% {
transform: rotate3d(1, 1, 0, 0deg); /* Starting position, rotation along X and Y axes */
}
50% {
transform: rotate3d(1, 1, 0, 180deg); /* Half turn, still on the X and Y axes */
}
100% {
transform: rotate3d(1, 1, 0, 360deg); /* Full turn, back to the front */
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Create the custom cursor element
const customCursor = document.createElement('div');
customCursor.classList.add('custom-cursor');
const shadow = document.createElement('div');
shadow.classList.add('cursor-shadow');
document.body.appendChild(customCursor);
document.body.appendChild(shadow);
// Update custom cursor position on mouse move
document.addEventListener('mousemove', (e) => {
customCursor.style.left = `${e.clientX}px`;
customCursor.style.top = `${e.clientY}px`;
shadow.style.left = `${e.clientX }px`;
shadow.style.top = `${e.clientY + 10}px`;
});
// Handle mouse enter/leave events for links
const links = document.querySelectorAll('a, button');
links.forEach(link => {
link.addEventListener('mouseenter', () => {
customCursor.style.background = 'url("********* CURSOR IMAGE TWO **********") no-repeat center';
customCursor.style.transform = 'scale(1.8)';// Enlarge on hover
});
link.addEventListener('mouseleave', () => {
customCursor.style.background = 'url("********* CURSOR IMAGE ONE **********") no-repeat center';
customCursor.style.transform = 'scale(1)'; // Reset to default cursor size
});
});
// Hide the custom cursor when mouse leaves the window
window.addEventListener('mouseout', () => {
customCursor.style.display = 'none'; // Hide cursor when mouse leaves the window
shadow.style.display = 'none'; // Hide shadow as well
});
// Show the custom cursor when mouse enters the window again
window.addEventListener('mouseover', () => {
customCursor.style.display = 'block'; // Show cursor when mouse re-enters the window
shadow.style.display = 'block'; // Show shadow again
});
});
</script>