Carrd CSS Styles

Here is a collection of CSS Styles that I use in my Carrd websites.

• Hide Untitled
• Lightbox Black BG
• SmugMug Embed

• ← Back

Hide Untitled Captions

When using Lightbox, you can enter a caption. If you don't enter a caption, clicking the image shows Untitled as the caption. This script will remove Untitled so if you have no caption for a particular photograph, you will just get a blank caption.


<script>
/* Hide UNTITLED Caption */
(function () {
function hideUntitledCaption() {
const caption = document.querySelector('.gallery-component-modal .caption');if (!caption) return;if (caption.textContent.trim().toUpperCase() === 'UNTITLED') {
caption.style.display = 'none';
} else {
caption.style.display = '';
}
}const observer = new MutationObserver(hideUntitledCaption);observer.observe(document.body, {
childList: true,
subtree: true,
characterData: true,
attributes: true
});hideUntitledCaption();
})();
</script>


• ← Back

Change Lightbox to Black with White Text

Lighthouse backgrounds by default are a transparent white with black lettering. Depending on the background, this can cause readability issues. This changes the background to black with white lettering.


<style>
/* Carrd Gallery Lightbox *//* Black background + white captions */
.gallery-component-modal.light {
--color-background: rgba(0, 0, 0, 0.95) !important;
--color-background-zooming: rgba(0, 0, 0, 1) !important;
--color-caption-text: #ffffff !important;
}/* Replace Carrd's built-in close icon */
.gallery-component-modal .close {
background-image: none !important;
position: absolute;
top: 0;
right: 0;
width: 6rem;
height: 6rem;
cursor: pointer;
}/* Draw white X */
.gallery-component-modal .close::before,
.gallery-component-modal .close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2rem;
height: 2px;
background: #ffffff;
transform-origin: center;
}.gallery-component-modal .close::before {
transform: translate(-50%, -50%) rotate(45deg);
}.gallery-component-modal .close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}/* Slightly soften until hovered */
.gallery-component-modal .close {
opacity: 0.75;
}.gallery-component-modal .close:hover {
opacity: 1;
}
</style>


• ← Back

External Smugmug Embed

This takes a SmugMug embed link and expands it to center the display and include default sizes.


/* Smugmug Embed Custom */
<div style="
width:100%;
display:flex;
justify-content:center;
">
<iframe
src="https://www.smugmug.com/frame/slideshow?key=LjRD37&speed=3&transition=fade&autoStart=1&captions=1&navigation=1&playButton=0&randomize=1&transitionSpeed=2"
style="
width:800px;
max-width:100%;
height:600px;
border:0;
"
scrolling="no">
</iframe>
</div>