GALLERY COVER IMAGE TITLE FONT CHANGE

richard_paris

Hey everyone,
It's been a long time since my last postings where I received a lot of help customizing my website.
Hopefully, someone can help me.
I've decided to add a Gallery Cover header to my thumbnail pages and I am wondering if I can change the font that appears in the red box to Arial or something similar.

Here's a link to a page showing what I mean.
https://www.richardparisphotography.ca/PLAGUE-DOCTOR-TRILOGY/

Gracias,
Richard Paris

Hikin' Mike

You have this in your custom CSS:

/**
* Colored Box on Gallery Title
***************************************************/ 
.sm-gallery-cover-info > .sm-gallery-cover-title {
  display: inline-block;
  padding: 0px 10px;    
  background: #CC0600;
  color: white;
  font-size: 140%;
}

Just add font-family: Arial;. Normally if you want to add a different font, you would have to add that font using @font-face to your CSS ( https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts ), but if you just want to use Arial I would say 99% of the users have that loaded, so it will display correctly.

richard_paris

Thanks Mike. I actually found a decent font in the Theme edit panel.
Been so long since I actually delved into making changes I was brain dead on this.
I think you helped me way back on a lot of the original changes when SM made the big changeover.

I had to re-signup so I lost my original posting history.

richard_paris

One more thing while I've got you Mike.
Can I make the red title block smaller within the header?

Thx

Hikin' Mike

@richard_paris said:
One more thing while I've got you Mike.
Can I make the red title block smaller within the header?

Thx

Change the font size.

richard_paris

Thx Mike,
I changed the [font-size: 140%;] and it changed the red box title on the thumbnail page but didn't effect the red box title slug on the gallery page masthead.
Also added the Arial line and it worked great.

Hikin' Mike

I forgot you added a cover image. To change the font-size you need this: .sm-user-ui .sm-gallery-cover[data-show-image=true] .sm-gallery-cover-title {font-size: 60px;}. 60px is what it is now.

richard_paris

Sorry for being obtuse but do I add this to the other code block or is it stand alone?

Hikin' Mike

This is new, so you need to add it to your Theme's Custom CSS Section. So I guess it would be stand alone.

richard_paris

Done. Works great at 40px.
Thank you.