Customization of Gallery titles

ljk

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,

Allen

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%}

ljk

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%}

Allen

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

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

Hikin' Mike

@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.

ljk

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' Mike

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' Mike

@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' Mike

@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

ljk

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,

ljk

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' Mike

@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

ljk

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' Mike

@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;
}

ljk

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' Mike

@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;
}

ljk

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' Mike

@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.

denisegoldberg

@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