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 */
Powered by SmugMug Owner Log In