CSS CODES
HOW TO HIDE THE PLUS SIGN IN SQUARESPACE ACCORDION
/* Hide the plus sign in Squarespace accordion */
.sqs-block-accordion .plus__horizontal-line,
.sqs-block-accordion .plus__vertical-line {
display: none !important;
}
How to Replace Cursor with a Custom Image
ADD TO CSS
body {
cursor: none; /* Hides the default cursor */
}
.cursor-image {
position: fixed;
width: 50px; /* Adjust size as needed */
height: 50px; /* Adjust size as needed */
background-image: url('IMAGE URL HERE');
background-size: cover;
background-position: center;
pointer-events: none; /* Prevent the image from interfering with interactions */
transform: translate(-50%, -50%);
z-index: 9999; /* Ensure it's always on top */
}
Add javascript code injection FOOTER
<script>
document.addEventListener('mousemove', (event) => {
let cursorImage = document.querySelector('.cursor-image');
// If the image element doesn't exist, create it
if (!cursorImage) {
cursorImage = document.createElement('div');
cursorImage.classList.add('cursor-image');
document.body.appendChild(cursorImage);
}
// Ensure it's at the very end of the DOM (highest stacking context)
document.body.appendChild(cursorImage);
// Update position to follow the cursor
cursorImage.style.left = `${event.clientX}px`;
cursorImage.style.top = `${event.clientY}px`;
});
</script>
HOW TO CENTER TEXT IN ACCORDION
/* Center all text inside each accordion item */
.sqs-block-accordion .accordion-item {
text-align: center;
display: flex;
flex-direction: column; /* Stack title and description vertically */
align-items: center; /* Center items horizontally */
justify-content: center; /* Center items vertically */
padding: 15px; /* Add spacing around the accordion item */
}
/* Style and center the accordion title */
.sqs-block-accordion .accordion-item .accordion-title {
margin-bottom: 10px; /* Add spacing between the title and the description */
font-weight: bold; /* Optional: Make the title bold */
}
/* Style and center the accordion description/content */
.sqs-block-accordion .accordion-item .accordion-content {
display: block; /* Ensure it behaves as a block element */
margin-top: 5px; /* Add spacing between the title and content */
}
How to Rotate the Text
ADD TO CODE BLOCK
<div class="rotating-text-horizontal">
Horizontal Rotating Text
</div>
ADD TO CUSTOM CSS WINDOW
body {
margin: 0;
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
min-height: 100vh; /* Full viewport height */
background-color: #f9f9f9; /* Optional background color */
}
.rotating-text-horizontal {
display: inline-block;
font-size: 24px; /* Default text size */
font-style: Century Gothic;
font-weight: bold;
color: #186997; /* Default text color */
animation: horizontalRotate 3s linear infinite; /* Horizontal rotation animation */
transform-origin: center center; /* Rotation axis */
perspective: 1000px; /* Add 3D perspective for better effect */
text-align: center; /* Ensure proper alignment */
}
/* Animation keyframes */
@keyframes horizontalRotate {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg); /* Half rotation */
}
100% {
transform: rotateY(360deg); /* Full rotation */
}
}
/* Mobile-specific styles */
@media (max-width: 768px) {
.rotating-text-horizontal {
font-size: 20px; /* Adjust text size for smaller screens */
color: #555; /* Optionally use a lighter color */
}
}
@media (max-width: 480px) {
.rotating-text-horizontal {
font-size: 16px; /* Even smaller font size for very small screens */
animation: horizontalRotate 4s linear infinite; /* Slower rotation on small screens */
}
}