Changing font in Title, Caption and Keywords section

FiestaRed

I just wondered if it was at all possible to change the font in the Title and Caption boxes? The ones that show up when you hover over an image.
I've seen other Smugmug websites withe different fonts in this area but wasn't sure if that was because those websites had different themes to mine.

Jenuine

Hello Fiesta Red, You change your font in the theme of your site. https://help.smugmug.com/use-themes-to-tweak-my-design-H1y_leP1Erz. There you can update the font that is used for the account.

FiestaRed

Thanks for the help but I can't see anywhere on there where I can change the Title and Caption fonts. At the minute, when I hover over an image, the font that shows on the Title and Caption lines is different to the fonts on my page. I'd like them both to be the same if that's at all possible please?

Hikin' Mike

@FiestaRed said:
Thanks for the help but I can't see anywhere on there where I can change the Title and Caption fonts. At the minute, when I hover over an image, the font that shows on the Title and Caption lines is different to the fonts on my page. I'd like them both to be the same if that's at all possible please?

There is no setting, but you can use CSS to make those changes. I need to know what font you want, so please post your site here.

FiestaRed

Thank you Mike.

My site is www.mikeswainwildlife.co.uk The font I would like to use for the Titles on hover is the same one as all the paragraph headers on the site. Can't work out how to identify the font name as it came as standard with I think the Zoe theme. Hope this helps.

Hikin' Mike

Looks like you are using Roboto on everything on your site.

FiestaRed

Thanks again Mike. Looking on the list of fonts at Google I think that's the one. It looks like the Titles are in Bold900 version if that makes sense.

Hikin' Mike

Everything on your site is Roboto. What changes do you want?

FiestaRed

I’d like the Title and Captions when I hover over a photo to be the same as the paragraph headers and body text

Hikin' Mike

Everything on your site is Roboto.

FiestaRed

The paragraph headers are not as tall and much bolder than the Titles when I hover over photos

Hikin' Mike

I don't see any difference in how "tall" they are. If you want your titles to be bold, then add this to your CSS: .sm-user-ui .sm-tile-info {font-weight:bold;}.

FiestaRed

Thanks Mike. I’m on my mobile now, photographing a sunset in the UK.

I’ll give the CSS a try as soon as I reach home. Where do I add the CSS please? Something I’ve never tried before.

Hikin' Mike

It should go in your theme's custom CSS section. A tutorial to help you: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

Good luck for your sunset!

FiestaRed

Thank you for all the help and patience Mike. Really appreciated.

FiestaRed

Back home now Mike. I added the CSS you kindly let me have but it seems to have changed the Captions rather than the Titles. Most of my images only have Captions but on the new Art Stones page I'm working on, it much easier to spot, this page has Titles and Captions. The Captions (bottom line) are now much bolder but the Titles have stayed the same.

Hikin' Mike

Your 'Art Stones' link doesn't work...

FiestaRed

There is no "live" link at the minute Mike, the page is not finished it's something I'm still working on. This is a link to that page: https://www.mikeswainwildlife.co.uk/Weather-Photos--copy

Hikin' Mike

Your Titles and Captions are the same weight, 400. Your Titles are 16px while your Captions, Body and "Headers" (not technically headers, just bold) are 14px. So if you want to change your Titles this will do it: .sm-user-ui .sm-tile-info .sm-tile-title {font-size: 14px;}.

If this isn't what you need, you need to be more specific.

FiestaRed

Thanks for all the help Mike. I also had to add the following CSS to make the Title bold .sm-user-ui .sm-tile-info .sm-tile-title {font-weight:bold;}

If you've not had enough of my questions but still on the same topic, another if I may? When I click on an image a new photo opens in Lightbox. Is there any way I can change the Titles and Captions in the Lightbox view as I have with the page view?

Hikin' Mike

Yep, you can change those too. Since I don't know if you want different styles from the Title and Captions, this is an example:

/* Titles in Lightbox */
.sm-user-ui .sm-lightbox-v2-photo-buttons .sm-button-label h4 {
  font-size: 14px;
  font-weight: bold;
  color: black;
}

/* Captions in Lightbox */
.sm-user-ui .sm-lightbox-v2-photo-buttons .sm-button-label p {
  font-size: 12px;
  color: red;
}

FiestaRed

Thank you Mike. When I add either of the CSS blocks above, nothing happens at all. Do I need to add the CSS in the same place as the ones I changed earlier or somewhere else?

Hikin' Mike

Same place as before.

FiestaRed

@Hikin' Mike said:
Same place as before.

Sorry, tried them both and nothing happens Mike. Not sure if it makes any difference but I use the "multiple photos" option on my pages, click on any of the photos in there and that brings up a Lightbox photo.

Hikin' Mike

@FiestaRed said:
Sorry, tried them both and nothing happens Mike. Not sure if it makes any difference but I use the "multiple photos" option on my pages, click on any of the photos in there and that brings up a Lightbox photo.

I don't understand. I see the changes on your Lightbox:

FiestaRed

Mike I can't understand that at all. The images below are what I see on both my screen and mobile phone:

Hikin' Mike

The extra stuff under the image I posted just included the CSS using the web tool. It also shows that it works on mobile (736px or smaller), but I found out it doesn't work on desktop. This should work now:

.sm-user-ui .sm-lightbox-v2-photo-buttons .sm-button-label h2,
.sm-user-ui .sm-lightbox-v2-photo-buttons .sm-button-label h4 {
  font-size: 14px;
  font-weight: bold;
  color: black;
}

FiestaRed

Brilliant Mike, thank you. Do you have another piece of CSS to make the Caption line the same as the Title ? The top line is the right size now and in black but the line below it is still in white.

Hikin' Mike

I included the Captions on a previous post, but here it is again:

/* Captions in Lightbox */
.sm-user-ui .sm-lightbox-v2-photo-buttons .sm-button-label p {
  font-size: 12px;
  color: red;
}

FiestaRed

That's brilliant Mike, you're a star.

I'm slowly getting to understand what CSS does but I've no idea how to come up with how it's arrived at. I've made a tiny start and managed to change the colour of the text. What I'd like to do if at all possible is centralise the text in the Lightbox and move it away slightly from the bottom line.

Hikin' Mike

Add this:

.sm-user-ui .sm-lightbox-v2-photo-title {
  text-align: center;
  margin: auto auto 20px;
}

That will center the text and add 20px bottom margin.