Adding your own custom code
Back to: Enhancing your Views with advanced features
Adding custom code – Use the Custom Code panel to apply your own CSS and JavaScript, and style elements with custom field classes.
Timestamps:
- 00:00 Intro
- 00:30 Adding code to the Custom Content field
- 01:02 Adding CSS to the Custom Code box
- 04:01 Adding JS to the Custom Code box
Code snippets used in the video
Display entries in a grid instead of a list (CSS):
.gv-list-multiple-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Change 3 to the number of columns desired */
gap: 24px; /* Adjust the gap as needed */
align-items: start;
}
.gv-list-view {
min-width: 0;
align-self: stretch; /* Equal height: remove this line if you don't want equal heights */
display: flex;
flex-direction: column;
}
.gv-grid.gv-list-view-content {
flex-grow: 1; /* Allows content to fill available vertical space */
display: flex;
}This will only work for List and Maps layouts. For snippets that work for other layouts, see this doc.
Create a slide-in animation for View entries (JS):
document.addEventListener("DOMContentLoaded", function () {
const entries = document.querySelectorAll(".gv-list-view");
entries.forEach((entry, i) => {
// Set initial styles directly
entry.style.opacity = "0";
entry.style.transform = "translateX(60px)";
entry.style.transition = "all 0.6s ease-out";
// Trigger animation after slight delay
setTimeout(() => {
entry.style.opacity = "1";
entry.style.transform = "translateX(0)";
}, i * 200); // stagger effect
});
});