Change Background Color in SmugMug Lightbox
SmugMug recently changed the code for the Lightbox. They also added some basic Custom CSS, like changing the background of the Lightbox. It’s great except it has some “holes” (original colors) in it, especially in the Cart section. So if you’d like to change the Lightbox from a light color to a dark version, like I’m currently using, you’ll need to add this to your theme’s custom CSS section. Feel free to change the colors to suit.
You’ll notice the first section cursor: default;. I noticed a bug when doing this, so I added the default cursor when you hover an active page.
CSS
/**
* Dark Version of Lightbox and Cart
* Based on the "NYX" Theme
************************************************/
.sm-user-ui .sm-lightbox-v2 .sm-button-group .sm-button.sm-button-skin-submit,
.sm-user-ui .sm-lightbox-v2-navbar .sm-button.sm-button-skin-default.sm-button-nochrome[data-selected="true"] {cursor: default;}
.sm-user-ui.sm-tooltip,
.sm-user-ui .sm-tooltip {
font-family: 'Open Sans', Arial, sans-serif;
color: #ededf0;
background-color: #47474a;
border-color: #4f4f45;
}
/* Structure Background */
.sm-user-ui .sm-lightbox-v2,
.sm-user-ui .sm-lightbox-v2-navbar,
.sm-user-ui .sm-lightbox-v2-sidebar,
.sm-user-ui .sm-com-lb-list-item,
.sm-user-ui .sm-com-lb-image-list-item {background-color: #0f0f0f;}
.sm-user-ui .sm-com-lb-list-item:hover,
.sm-user-ui .sm-com-lb-image-list-item:hover,
.sm-user-ui .sm-com-lb-image-list-item:hover > .sm-com-lb-list-item {background-color: #1a1a1a;}
/* Structure Borders and Lines*/
.sm-user-ui .sm-com-lb-sku-total,
.sm-user-ui .sm-com-lb-sidebar-divider,
.sm-user-ui .sm-com-lb-sidebar-header,
.sm-user-ui .sm-com-lb-sidebar-content,
.sm-user-ui .sm-com-lb-cart-summary-list-item,
.sm-user-ui .sm-com-lb-confirmation-product,
.sm-user-ui .sm-com-lb-confirmation-quantity,
.sm-user-ui .sm-com-lb-sidebar-footer-container {border-color: #2e2e30;}
.sm-user-ui .sm-form-field-underline {border-bottom-color: #1f1f21;}
/* Text and Icons */
.sm-lightbox-v2-sidebar h1,
.sm-lightbox-v2-sidebar h2,
.sm-lightbox-v2-sidebar h3,
.sm-lightbox-v2-sidebar h4,
.sm-lightbox-v2-sidebar h5,
.sm-lightbox-v2-sidebar .sm-label,
.sm-lightbox-v2-sidebar .sm-emphasized,
.sm-lightbox-v2-sidebar .sm-form-field-select,
.sm-lightbox-v2-sidebar .sm-form-field-select-arrow,
.sm-user-ui .sm-com-lb-more-info,
.sm-user-ui .sm-tabview [role="tab"]:hover,
.sm-user-ui .sm-com-lb-sku-total-label,
.sm-user-ui .sm-com-lb-confirmation-total-label,
.sm-user-ui .sm-com-lb-sku-quantity-picker .sm-currency-amount,
.sm-user-ui .sm-com-lb-confirmation-product-value,
.sm-user-ui .sm-com-lb-confirmation-quantity-count,
.sm-user-ui .sm-com-lb-confirmation-total-amount,
.sm-user-ui .sm-com-lb-confirmation-check-mark .sm-icon,
.sm-user-ui .sm-com-lb-cart-summary-count-total > div,
.sm-user-ui .sm-com-lb-cart-summary-count-total .sm-icon,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome:hover,
.sm-user-ui .sm-lightbox-v2-navbar .sm-button.sm-button-skin-default.sm-button-nochrome[data-selected="true"]{color:#ededf0;}
.sm-user-ui .sm-share-content,
.sm-user-ui .sm-com-lb-more-info-details p,
.sm-user-ui .sm-com-lb-more-info-details h4 {color: #87878c;}
.sm-user-ui .sm-com-lb-description,
.sm-user-ui .sm-com-lb-in-cart-indicator,
.sm-user-ui .sm-com-lb-flat-catalog-category-title {color: #6e6e73;}
.sm-user-ui .sm-com-lb-list-item,
.sm-user-ui .sm-com-lb-image-list-item {color: #bababd;}
/* Navigation Buttons */
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default[disabled],
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default[disabled]:hover,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default[disabled]:active {
color: #bababd;
border-color: #2e2e30;
background: #0f0f0f;
}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default:hover,
.sm-user-ui .sm-button-group .sm-button.sm-button-skin-submit,
.sm-user-ui .sm-button-group .sm-button.sm-button-skin-submit:hover,
.sm-user-ui .sm-lightbox-v2 .sm-button-group .sm-button.sm-button-skin-submit,
.sm-user-ui .sm-lightbox-v2 .sm-button-group .sm-button.sm-button-skin-submit:hover {
color: #ededf0;
border-color: #2e2e30;
background-color: #1a1a1a;
}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit[disabled],
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit[disabled]:hover,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit[disabled]:active {
color: #ededf0;
background-color: #2e2e30;
}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit:hover {background-color: #404042;}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[disabled],
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[disabled]:hover,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[disabled]:active {
color: #87878c;
background-color: transparent;
}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome:hover {color: #ededf0;}
.sm-user-ui .sm-form-field-spinner > input,
.sm-user-ui .sm-form-field-stepper > input {
background-color: #1f1f21;
color: #e3e3e6;
}
.sm-user-ui .sm-form-field-spinner,
.sm-user-ui .sm-form-field-stepper,
.sm-user-ui .sm-form-field-spinner > input,
.sm-user-ui .sm-form-field-stepper > input {border-color: #262629;}
/* Photo Sharing Panel */
.sm-user-ui .sm-tab-label,
.sm-user-ui .sm-tab-label:visited,
.sm-user-ui .sm-tabview [role="tab"],
.sm-user-ui .sm-tabview [role="tab"]:visited,
.sm-user-ui .sm-tabs-vertical,
.sm-user-ui .sm-tabview[data-orientation="vertical"] [role="tablist"] {
color: #87878c;
background-color: #1a1a1a;
}
.sm-user-ui .sm-tab-selected > .sm-tab-label,
.sm-user-ui .sm-tab-selected > .sm-tab-label:hover,
.sm-user-ui .yui3-tab-selected > .sm-tab-label,
.sm-user-ui .yui3-tab-selected > .sm-tab-label:hover,
.sm-user-ui .sm-tabview [role="tab"][aria-selected="true"],
.sm-user-ui .sm-tabview [role="tab"][aria-selected="true"]:hover {
color: #ededf0;
background-color: #0f0f0f;
cursor: default;
}
.sm-user-ui .sm-form-field-textarea,
.sm-user-ui .sm-form-field-text-input {
color: #ededf0;
background-color: #1a1a1a;
border-color: #262629;
}
.sm-user-ui .sm-form-field-textarea:focus,
.sm-user-ui .sm-form-field-text-input:focus {
background-color: #262629;
border-color: #262629;
}
.sm-user-ui .sm-form-field-radio-item .sm-form-field-radio-icon-container,
.sm-user-ui .sm-form-field-checkbox-item .sm-form-field-checkbox-icon-container {
background-color: #1f1f21;
border-color: #404042;
}
.sm-user-ui .sm-form-field-radio-item:hover .sm-form-field-radio-icon-container,
.sm-user-ui .sm-form-field-checkbox-item:hover .sm-form-field-checkbox-icon-container {
background-color: #262629;
border-color: #47474a;
}
.sm-user-ui .sm-form-field-radio-item[disabled] .sm-form-field-radio-icon-container,
.sm-user-ui .sm-form-field-checkbox-item[disabled] .sm-form-field-checkbox-icon-container {background-color:#1a1a1a;}
.sm-user-ui .sm-form-field-select-option {background-color: #1a1a1a;}
/* Sidebar Tool Popup */
.sm-user-ui .sm-component-menu,
.sm-user-ui .sm-component-menu-item,
.sm-user-ui .sm-component-menu-item-link,
.sm-user-ui .sm-component-menu-item-link:visited {color: #87878c;}
.sm-user-ui .sm-component-menu {background-color: #1a1a1a;}
.sm-user-ui .sm-component-menu-item:focus,
.sm-user-ui .sm-component-menu-item:hover,
.sm-user-ui .sm-component-menu-item:focus > .sm-component-menu-item-link,
.sm-user-ui .sm-component-menu-item:hover > .sm-component-menu-item-link {color:#ededf0;}
.sm-user-ui .sm-component-menu,
.sm-user-ui .sm-component-menu-item,
.sm-user-ui .sm-component-menu-heading {border-color: #1f1f21;}
.sm-user-ui .sm-component-menu-item:hover:not([aria-disabled="true"]) {background:#1f1f21;}
/* End Lightbox Code */