CSS Snippets
Quick copy-paste CSS snippets for common SmugMug customizations.
Small CSS tweaks you can copy and paste directly into your SmugMug custom CSS content block.
Hide SmugMug Footer
/* Hide SmugMug footer */
.sm-user-ui .sm-page-powered-by {
display: none;
}Lightbox view - stop truncating of captions in lightbox view
/* Lightbox view - stop truncating of captions in lightbox view */
.sm-lightbox-v2-photo-title-and-caption .sm-text-ellipsis {
white-space: normal;
overflow: visible;
}
.sm-lightbox-v2-photo-title .sm-button-label {
overflow: visible;
}Hide cm (centimeters) values in shopping cart
/* Hide CM values in shopping cart */
.sm-com-lb-alt-dimensions {
display: none !important;
}Rounded profile picture
/* Rounded profile picture */
.sm-page-widget-profile-v2-biophoto {
border-radius: 50%;
margin-left: 1rem;
margin-bottom: 1rem;
}Hiding scrollbars in the SmugMug slider
This CSS code has to be added to the THEME → CSS code. This code will not work if you add it to a CSS content block.
/* Hiding scrollbars in the SmugMug slider*/
.sm-user-ui body *.sm-component-carousel,
.sm-user-ui body *.sm-component-carousel-scroll,
.sm-user-ui body *.sm-component-carousel-image-list {
scrollbar-color: transparent transparent !important;
}Adding borders around images
This code can be added to a specific gallery or page or Entire Site - depening if you want to which images you would like to apply this to.
/* Adding borders around images*/
.sm-tile-content {
border: 2px solid #000;
}SmugMug Form Builder
Create custom contact forms for your SmugMug site with a visual builder. Generate styled HTML and CSS code ready to paste into your site.
How to Add a Label and Border to SmugMug's Download Button
Make SmugMug's download button more visible by adding a "Download" text label, rounded border, and hover effects using CSS.