Change the Color of the Font & Link Colors in Captions - Collage Landscape & Portrait

Darter02Darter02 Registered Users Posts: 947 Major grins
edited October 1, 2013 in SmugMug Customization
I've been working on a new theme for my wedding galleries. The font & accent colors work well with in the gallery itself, but in the photo captions they are too pale. I use collage style galleries, both portrait & landscape.

I tried using this CSS to change the colors.
/* Change the title font */
.sm-tile-title {
   color: #161714 !important; 
   font-size: 14px; /* Set the font size */
}

/* Change the caption font */
.sm-tile-caption {
   color: #161714 !important; 
   font-size: 14px; 
}

/* Set the caption link color */
.sm-tile-info a {
  color: #898752 !important;  
}

/* Set the caption hover color*/
.sm-tile-info a:hover {
  color: #f3f3b2 !important;
}


No dice. Do I have the wrong CSS ids??

Here's a photo in my testing gallery.


I disabled Right-Click. I also know the watermarks are looking odd. This gallery is of thumbnails snagged off the site, which had one style of thumb and the gallery has a different.

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited October 1, 2013
    Based on your link, I assume you want to change the color of the lightbox title and/or caption. Here is the code:
        /* Lightbox Title and Captions*/
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, 
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
        color: #000;
        }
    .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
        color: #111 !important;
        }
    
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 1, 2013
    Based on your link, I assume you want to change the color of the lightbox title and/or caption. Here is the code:
        /* Lightbox Title and Captions*/
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, 
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
        color: #000;
        }
    .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
        color: #111 !important;
        }
    

    If you want the title and caption to have the same color, there's no need for the 2nd statement there. And can be simplified to just:
        /* Lightbox Title and Captions*/
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, 
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
        color: #000;
        }
    

    If you want the title and caption to have different colors, then the first line has a duplicate entry that can be removed:
        /* Lightbox Title and Captions*/
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
        color: #000;
        }
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
        color: #111 !important;
        }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.