Options

Make captions in landscape collage stand out more?

guyguy Registered Users Posts: 191 Major grins
edited August 18, 2013 in SmugMug Customization
Is there any CSS magic I can use to make photo captions stand out more in landscape collage view when I mouse over them? Like changing the color of the caption from white to yellow?

Thanks.

Comments

  • Options
    jfilerjfiler Registered Users Posts: 42 Big grins
    edited August 15, 2013
    guy wrote: »
    Is there any CSS magic I can use to make photo captions stand out more in landscape collage view when I mouse over them? Like changing the color of the caption from white to yellow?

    Thanks.

    I did this on mine, made the captions smaller and bold. CSS for Entire Site. I'm sure you could add a font color parameter as well.

    .sm-page-widget-galleries .sm-tile-title {
    text-align: center;
    font-weight: bold;
    font-size: 10pt;
    }
    .sm-page-widget-folders .sm-tile-title {
    text-align: center;
    font-weight: bold;
    font-size: 10pt;
    }

    Joe Filer
    www.photographsbynature.com
  • Options
    guyguy Registered Users Posts: 191 Major grins
    edited August 15, 2013
    jfiler wrote: »
    I did this on mine, made the captions smaller and bold. CSS for Entire Site. I'm sure you could add a font color parameter as well.

    .sm-page-widget-galleries .sm-tile-title {
    text-align: center;
    font-weight: bold;
    font-size: 10pt;
    }
    .sm-page-widget-folders .sm-tile-title {
    text-align: center;
    font-weight: bold;
    font-size: 10pt;
    }

    Joe Filer
    www.photographsbynature.com

    Thanks I'll give that a try.
  • Options
    W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited August 16, 2013
    Joe

    Thanks for your code, however it isn't working for me (on my blog gallery, for example). Is this the same code you are using on your site, or is there some other reason this is not working for me?

    More particularly, the captions on my gallery appear only on mouseover while yours are always visible, but I can't see the setting that will achieve your look. Can you, or someone, kindly tell me what I'm missing?

    Thanks!
  • Options
    jfilerjfiler Registered Users Posts: 42 Big grins
    edited August 16, 2013
    The code is exactly what I have in my CSS block for Entire Site. I also have the following to remove the little folder icons from the captions:

    .sm-tile-folder .sm-tile-type-icon:after, .sm-tile-album .sm-tile-type-icon:after {
    display: none;
    }

    If you have all this in the Entire Site CSS block, it should look the same as mine. If not, I would be at a loss.

    Joe Filer
    www.photographsbynature.com
  • Options
    theresavtheresav Registered Users Posts: 21 Big grins
    edited August 18, 2013
    Joe

    Thanks for your code, however it isn't working for me (on my blog gallery, for example). Is this the same code you are using on your site, or is there some other reason this is not working for me?

    More particularly, the captions on my gallery appear only on mouseover while yours are always visible, but I can't see the setting that will achieve your look. Can you, or someone, kindly tell me what I'm missing?

    Thanks!

    I am finding the terminology can be quite confusing in trying to tell people where you (and that's a all-encompassing 'you') are on the site. Seems like the help given here will adjust the titles on the albums/folders/gallery folder groups, but not when you drill all the way down to each gallery of individual pics. I haven't been able to find a way to get the image filenames to show at all (even though I have ON selected for all my galleries), but when I add a caption to each picture, it only shows up all the time (without having to hover) when in Collage Portrait mode.

    But it does show up on the other views (I'm currently using Collage Landscape) when you hover over the image, although the text is too small and light to be able to comfortably read the info.

    Here's what I did to help it appear better. In a CSS block in the All Galleries section, add this...
    .sm-user-ui .sm-tiles-info-over .sm-tile-info p {
      font-size: 14px;
      color: white;
    }
    

    ...changing the font size and color as needed for your layout. You can also add a font-weight: bold; if you want to really make the words pop.

    There is most likely a more elegant way to do this, but in my fumbling and digging all over the dgrin forum, I've managed to cobble together something that works...for me, anyway!
  • Options
    VNemethVNemeth Registered Users Posts: 42 Big grins
    edited August 18, 2013
    theresav wrote: »
    I am finding the terminology can be quite confusing in trying to tell people where you (and that's a all-encompassing 'you') are on the site. Seems like the help given here will adjust the titles on the albums/folders/gallery folder groups, but not when you drill all the way down to each gallery of individual pics. I haven't been able to find a way to get the image filenames to show at all (even though I have ON selected for all my galleries), but when I add a caption to each picture, it only shows up all the time (without having to hover) when in Collage Portrait mode.

    But it does show up on the other views (I'm currently using Collage Landscape) when you hover over the image, although the text is too small and light to be able to comfortably read the info.

    Here's what I did to help it appear better. In a CSS block in the All Galleries section, add this...
    .sm-user-ui .sm-tiles-info-over .sm-tile-info p {
     
      font-size: 14px;
      color: white;
    }
    

    ...changing the font size and color as needed for your layout. You can also add a font-weight: bold; if you want to really make the words pop.

    There is most likely a more elegant way to do this, but in my fumbling and digging all over the dgrin forum, I've managed to cobble together something that works...for me, anyway!

    I want to thank Joe for the previous code that worked on the folders and gallery but not the individual photos. Now I wish to add a thank you to theresav for this code as it works great on the individual photos.

    Vic
Sign In or Register to comment.