Customization of Gallery titles

ljkljk Registered Users Posts: 33 Big grins

The titles for folders and galleries are too large even at ‘xs’. And, the font if changed may help making it smaller. What CSS can I do to adjust the size and/or change the font style?

The title: ‘Paintings’
https://www.lindakessler.com/PaintingFolder

The title: ‘Abstract’
https://www.lindakessler.com/PaintingFolder/Abstract/

And, to be move them closer to the image on the mobile. It’s fine on a desktop/laptop.

Thank you,

Comments

  • AllenAllen Registered Users Posts: 10,007 Major grins

    See if this works.
    This is unique to that page/widget number so can be placed in any site wide CSS.

    For "Paintings.
    .sm-user-ui .sm-page-widget-31486744 h1 {font-size: 160%}

    ‘Abstract’ page
    .sm-user-ui .sm-page-node-4GJLBx .sm-gallery-cover-title {font-size: 160%}

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ljkljk Registered Users Posts: 33 Big grins

    Allen,

    Tried it, did nothing. Here's the CSS codes in all. The two codes are on the bottom.

    @media screen and (max-width: 736px) {
    .sm-gallery-cover {
    min-height: 0px;
    margin-bottom: 0px;
    }
    }

    .sm-gallery-cover-title {
    margin-bottom: -30px;
    overflow: visible;
    }

    .sm-gallery-cover-info {
    overflow: visible;
    }

    /*hide keywords */.notLoggedin #photoKeywords {display: none;}

    /* Reduce font-size of the gallery title */ .sm-user-ui .sm-gallery-cover-title {font-size: 24px; }

    .sm-tile-keywords { display: none; }

    /* Change 3-column to 2-column on mobile */

    @media only screen and (max-width:392px) {

    .sm-tiles-column-organic.sm-tiles-col-3 .sm-tiles-column,
    .sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper {
    width:50%
    }
    .sm-tiles-Th .sm-tile-wrapper,
    .sm-tiles-Th .sm-tiles-column {
    max-width:100%;
    }
    .sm-tiles-spacing-36 .sm-tile {
    margin: 5px;
    }

    .sm-tiles-column-organic.sm-tiles-spacing-36, .sm-tiles-grid.sm-tiles-spacing-36 .sm-tiles-list {
    margin-left: 0px;
    }
    }

    /* Makes Thumbnail Background Transparent */
    .sm-user-ui .sm-tiles .sm-tile-content {background-color: transparent;}

    .sm-user-ui .sm-page-widget-31486744 h1 {font-size: 160%}

    .sm-user-ui .sm-page-node-4GJLBx .sm-gallery-cover-title {font-size: 160%}

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited March 11, 2022

    See if changing both to {font-size: 20px} works.

    There could be another rule that appears later in your CSS overriding these new rules.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @Allen said:
    See if changing both to {font-size: 20px} works.

    There could be another rule that appears later in your CSS overriding these new rules.

    I looked at it earlier and your original code seemed to work.

  • ljkljk Registered Users Posts: 33 Big grins

    Hikin Mike and Allen,

    Thank you, yay, fixed. Except -- there are two issues related. The folder "Paintings" - it is not being affected by the font size change. I went into the settings and the title "Paintings" doesn't even change from XS, S, M or Large. It stays the same size whichever I try to change it to. Problem is it is not consistent with the size of the folder: "Photographs." How can this be fixed? It tried everything. Also, the spacing between the title and the grid/image below has a lot of space between each on a mobile. What CSS codes can be applied so that the the text is not so far above above the grid/image with a bunch of white space? You guys are great, thank you! And, one more question. is there a way to boost the resolution on the images, on the site, vastly different than I have on my computer, thank you!

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    A little confused. You asked to change two specific sections; your 'PaintingFolder' and the 'Abstract' gallery, which does work. But it doesn't effect your Photography folder because you didn't ask for that. If you want both your Paintings AND Photogrpahy folders (and it's galleries) you need to remove this:

    .sm-user-ui .sm-page-widget-31486744 h1 {font-size: 150%}
    
    .sm-user-ui .sm-page-node-4GJLBx .sm-gallery-cover-title {font-size: 150%}
    

    And use this:

    /**
    * Changes font-size on Paintings and Photography
    * Folders and their Galleries
    *************************************************/
    .sm-user-ui .sm-page-widget-31486744 h1,
    .sm-user-ui .sm-page-widget-31486738 h1,
    .sm-user-ui .sm-page-parentnode-6cTswh .sm-gallery-cover-title,
    .sm-user-ui .sm-page-parentnode-PRBk7W .sm-gallery-cover-title {
      font-size: 150%;
    }
    
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @ljk said:
    Also, the spacing between the title and the grid/image below has a lot of space between each on a mobile. What CSS codes can be applied so that the the text is not so far above above the grid/image with a bunch of white space?

    Add this:

    /**
    * Removes Padding on Painting/Photography Folder on Mobile
    **************************************************************/
    @media screen and (max-width: 736px) {
    
      .sm-user-ui .sm-page-node .sm-page-widget-31486744 .sm-page-widget-content,
      .sm-user-ui .sm-page-node .sm-page-widget-31486738 .sm-page-widget-content {
        padding-bottom: 0 !important;
      }
    
    }
    
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @ljk said:
    And, one more question. is there a way to boost the resolution on the images, on the site, vastly different than I have on my computer, thank you!

    https://dgrin.com/discussion/268406/resolution#latest

  • ljkljk Registered Users Posts: 33 Big grins

    Hikin' Mike,

    I applied the following to the CSS but no change on the mobile:

    /**

    • Removes Padding on Painting/Photography Folder on Mobile
      **************************************************************/
      @media screen and (max-width: 736px) {

      .sm-user-ui .sm-page-node .sm-page-widget-31486744 .sm-page-widget-content,
      .sm-user-ui .sm-page-node .sm-page-widget-31486738 .sm-page-widget-content {
      padding-bottom: 0 !important;
      }

    }

    Also, can you address why the title "Paintings" on the folder I cannot adjust to be the same size as "Photographs" on the Photographs folder/page? And, how can I change the font style for both?

    Thank you,

  • ljkljk Registered Users Posts: 33 Big grins

    Whoops, sorry. yes, it is fine now. But the size of Paintings is not consistent with the size of the title Photographs... how can I fix this? And, change the font style? I meant to write that the gallery titles: Abstract, Figurative/Landscape... also have too much space between the title and the images, arghh. How can this be fixed?

    Thank you,

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited March 12, 2022

    @ljk said:
    Whoops, sorry. yes, it is fine now. But the size of Paintings is not consistent with the size of the title Photographs... how can I fix this? And, change the font style? I meant to write that the gallery titles: Abstract, Figurative/Landscape.

    Thank you,

    You missed this:

    https://dgrin.com/discussion/comment/2122579/#Comment_2122579

  • ljkljk Registered Users Posts: 33 Big grins

    Hikin' Mike,

    Thank you. You guidance is excellent! Some questions:

    1. While you gave me coding to remove padding for the gallery titles, i.e. Abstract, Brazil... there is still padding on the desktop and mobile. Looks strange with so much space between the title and the image. Is there a way to fix this for both platforms?
    2. Is there a way to change the font style for the titles of the folders/galleries?
    3. Is there a way to change the color of the font for the gallery titles?

    Thank you,

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @ljk said:
    1. While you gave me coding to remove padding for the gallery titles, i.e. Abstract, Brazil... there is still padding on the desktop and mobile. Looks strange with so much space between the title and the image. Is there a way to fix this for both platforms?

    Add this:

    /* Removes Bottom Margin in Gallery Titles */
    .sm-user-ui .sm-gallery-cover,
    .sm-user-ui .sm-gallery-content[data-size=medium] .sm-gallery-header {
      margin-bottom: 0;
    }
    

    @ljk said:
    2. Is there a way to change the font style for the titles of the folders/galleries?

    If you want to use a Google font, then yes. If you want to use a font that isn't in Google fonts, maybe.

    What font?

    @ljk said:
    3. Is there a way to change the color of the font for the gallery titles?

    Find this that you added earlier and add color: red like this:

    .sm-user-ui .sm-page-widget-31486744 h1,
    .sm-user-ui .sm-page-widget-31486738 h1,
    .sm-user-ui .sm-page-parentnode-6cTswh .sm-gallery-cover-title,
    .sm-user-ui .sm-page-parentnode-PRBk7W .sm-gallery-cover-title {
        font-size: 130%;
        color: red;
    }
    
  • ljkljk Registered Users Posts: 33 Big grins

    Hikin’ Mike,

    Thank you! I will attempt those changes.
    I am not sure which font. I will look at options of Google fonts. How can I try different ones with CSS?

    Thanks,

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited March 14, 2022

    @ljk said:
    Hikin’ Mike,

    Thank you! I will attempt those changes.
    I am not sure which font. I will look at options of Google fonts. How can I try different ones with CSS?

    Thanks,

    EDIT: Original post was dated and broken links.

    Read this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Add-More-Google-Fonts-to-Your-SmugMug-Site

    So with that example in the tutorial, you would use this:

    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 100;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/montserrat/v23/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Xw5aXo.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    .sm-user-ui .sm-gallery-cover-title,
    .sm-user-ui .sm-page-widget-31486744 h1,
    .sm-user-ui .sm-page-widget-31486738 h1 {
      font-family: Montserrat;
      font-weight: 100;
    }
    
  • ljkljk Registered Users Posts: 33 Big grins

    Hikin' Mike,

    You've been such a help, really appreciate it. Wish I found you a long time ago ;
    I will try those codes for the fonts.
    One last question, for now, I have my display size at Original, (not --All But Original) for my images, which I think is the highest resolution. Why do the images look so much better, in their original image, on my computer, not on the site? They are high resolution when I upload them to the site. It especially looks like lower resolution on my Iphone SE. I've looked at images on other website companies, and the resolution, crispness, colors look much better. Is there anything that can be done on Smugmug's end, that I am not thinking of?

    Thank you,

    Tx,

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @ljk said:
    Hikin' Mike,
    One last question, for now, I have my display size at Original, (not --All But Original) for my images, which I think is the highest resolution. Why do the images look so much better, in their original image, on my computer, not on the site? They are high resolution when I upload them to the site. It especially looks like lower resolution on my Iphone SE. I've looked at images on other website companies, and the resolution, crispness, colors look much better. Is there anything that can be done on Smugmug's end, that I am not thinking of?

    Thank you,

    Tx,

    No idea, sorry.

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited March 14, 2022

    @ljk said:
    One last question, for now, I have my display size at Original, (not --All But Original) for my images, which I think is the highest resolution. Why do the images look so much better, in their original image, on my computer, not on the site? They are high resolution when I upload them to the site. It especially looks like lower resolution on my Iphone SE. I've looked at images on other website companies, and the resolution, crispness, colors look much better. Is there anything that can be done on Smugmug's end, that I am not thinking of?

    Originals are not usually displayed, they are used for printing.

    I recommend choosing any display size except Original.

    https://www.smugmughelp.com/en/articles/336-protect-my-images

    If you don't feel that your photos are displaying as high resolution you might want to have the SmugMug Heroes take a look.
    https://www.smugmughelp.com/en/articles/309-email-a-smugmug-support-hero

Sign In or Register to comment.