Options

Custom Labels Next to Lightbox Icons No Longer Fit

corpuzrobcorpuzrob Registered Users Posts: 77 Big grins
in SmugMug Customization

Hi Smuggers,

Here is a link to my site:

http://www.robcorpuz.com/PORTFOLIO

I've noticed that the custom text labels (Share, Comment, Tools, Info, etc.) that I added next to the lightbox icons (using the code below, which I was very, very grateful to borrow from @leftquark -- Thanks! ) no longer fit, which I'm assuming is due to some kind of change implemented by Smugmug (it was working fine until some time within the last month or couple of weeks). I tried switching the old code with new code from @Photom here (thanks Photom!) but it wasn't aligned with the icons and I lost the hover color. I don't have the knowledge to tinker with this and get it working myself. Any suggestions will be appreciated. Again, here is what I think is the relevant code that I'm currently using:

/* Make the width of the lightbox caption wider */
.sm-user-ui .sm-lightbox-caption {
max-width: 800px !important;
}

/* The lightbox caption area is really wide but the text in it is much
skinner. The scroll bar was very far away. Bring it in to match
the width of the lightbox caption */
.sm-user-ui .sm-lightbox-panel {
max-width: 4010px !important;
}

/* Align the text to the left */
.sm-lightbox-info {
text-align: left !important;
}

/* Force linebreaks to have a break */
.sm-gallery-image-container .sm-tile-info, .sm-lightbox-caption,
.sm-gallery-images .sm-tile-info, .sm-lightbox-caption {
white-space: pre-wrap;
}

/* Disable all BR tags */
.sm-gallery-image-container .sm-tile-info br, .sm-lightbox-caption br,
.sm-gallery-images .sm-tile-info br, .sm-lightbox-caption br {
display: none;
}

/* For large screens only /
@media only screen and (min-width: 1200px) {
/ Add the word "Download" after the download button */
.sm-button.sm-button-image-download:after {
content: " Download" !important;
font-size: 90%;
}

/* Add the word "Info" after the info button */
.sm-button.sm-button-image-info:after {
content: " INFO" !important;
font-size: 90%;
}

/* Add the word "Tools" after the tools button */
.sm-button.sm-button-image-tools:after {
content: " TOOLS" !important;
font-size: 90%;
}

/* Add the word "Like" after the like button */
.sm-button.sm-button-image-like:after {
content: " LIKE" !important;
font-size: 90%;
}

/* Lightbox Add the word "Comment" after the Comments button */
.sm-lightbox-icons .sm-button.sm-button-image-comment:after {
content: " COMMENT" !important;
font-size: 90%;
}

/* Lightbox Add the word "Share" after the Share button */
.sm-lightbox-icons .sm-button.sm-button-image-share:after {
content: " SHARE" !important;
font-size: 90%;
}

/* Lightbox Add the word "Sizes" after the Sizes button */
.sm-lightbox-icons .sm-button.sm-button-image-sizes:after {
content: " SIZES" !important;
font-size: 90%;
}

/* Lightbox Add the word "Download" after the Download button */
.sm-lightbox-icons .sm-button.sm-button-image-download:after {
content: " DOWNLOAD" !important;
font-size: 90%;
}

}

.sm-lightbox-icons .sm-button.sm-button-image-share:hover {
color: #e3af01;
}

.sm-lightbox-icons .sm-button.sm-button-image-comment:hover {
color: #e3af01;
}

.sm-lightbox-icons .sm-button.sm-button-image-tools:hover {
color: #e3af01;
}

.sm-lightbox-icons .sm-button.sm-button-image-download:hover {
color: #e3af01;
}

.sm-lightbox-icons .sm-button.sm-button-image-info:hover {
color: #e3af01;
}

.sm-lightbox-icons .sm-button.sm-button-image-sizes:hover {
color: #e3af01;
}

.sm-lightbox-icons .sm-button.sm-button-image-like:hover {
color: #e3af01;
}

http://www.robcorpuz.com/

Comments

Sign In or Register to comment.