Edit gallery title

JDGS

Hello everyone,

Thanks in advance for your help!
I'm struggling with something and I've already tried almost everything. I want to change the size and position of the galleries titles, here it is my site: https://danielsantos.smugmug.com/Gallerie/Birds/
The galleries theme is "Smugmug" but I edit it using this: http://www.aaronmphotography.com/Customizations/Gallery/FIlmstrip-Gallery-Style

I already tried many different css codes but none worked. Some examples bellow:

.sm-tiles-grid ul li a p {
font-size: 125%!important;
padding-left: 0!important;
padding-right: 0!important;
color: white!important;
font-weight: bold!important;
}

Some codes from here: https://helpdesk.smugmug.com/Customization-CSS-for-heroes-s/Font-Customizations

Update: I don't know if I'm doing something wrong, or if there is some conflict in the site, but I actually cannot make any modifications on the galleries using css. I'm still using the 14 day trial, does it have anything to do with this?

Smug Eric

It looks like that code is trying to target this section of your page:

But there is no p tag there. After the a is just two img tags. But for that page you should be able to target the gallery title with this:

.sm-gallery-cover-info .sm-gallery-cover-title {
Font-size: 10px;
}

Hikin' Mike

Where do you want the text to go?

This will change the font-size, color and style. Add that to your theme's CSS:

.sm-user-ui .sm-gallery-cover .sm-gallery-cover-title {
    color: #f00;
    font-size: 125%;
    font-weight: bold;
    }

JDGS

I don't know if I'm doing something wrong, or if there is some conflict in the site, but I actually cannot make any modifications on the galleries using css. I'm still using the 14 day trial, does it have anythi> @"Smug Eric" said:
> It looks like that code is trying to target this section of your page:
>
>
>
> But there is no p tag there. After the a is just two img tags. But for that page you should be able to target the gallery title with this:
>
> .sm-gallery-cover-info .sm-gallery-cover-title {
> Font-size: 10px;
> }

> @"Hikin' Mike" said:
> Where do you want the text to go?
>
> This will change the font-size, color and style. Add that to your theme's CSS:
>
> .sm-user-ui .sm-gallery-cover .sm-gallery-cover-title { color: #f00; font-size: 125%; font-weight: bold; }

Thank you both for helping, I really appreciate it. However, neither of the codes work in my site.
Hikin' Mike the vertical position is ok, I just want to change the horizontal position. I want the middle of text to be positioned where the image starts.

Hikin' Mike

@JDGS said:
Thank you both for helping, I really appreciate it. However, neither of the codes work in my site.

Hikin' Mike the vertical position is ok, I just want to change the horizontal position. I want the middle of text to be positioned where the image starts.

I'm not seeing the code on your site. Where did you put it? The code works. I usually put my CSS on my theme's site-wide CSS, but putting a CSS block on 'All Galleries' should work as well.

JDGS

> @"Hikin' Mike" said:
> @JDGS said:
> Thank you both for helping, I really appreciate it. However, neither of the codes work in my site.
>
> Hikin' Mike the vertical position is ok, I just want to change the horizontal position. I want the middle of text to be positioned where the image starts.
>
>
>
>
>
> I'm not seeing the code on your site. Where did you put it? The code works. I usually put my CSS on my theme's site-wide CSS, but putting a CSS block on 'All Galleries' should work as well.

I put it on "All Galleries", but I moved it to the "Entire site" just to see if it would work and finally worked! Thank you so much! Just one more thing, how could I move the text to the position I want?

Hikin' Mike

Replace the code I posted earlier and use this. It just adds a few more lines to the original CSS I posted and a new set of lines:

.sm-user-ui .sm-gallery-cover .sm-gallery-cover-title {
    color: red;
    font-size: 120%;
    max-width: 100%;
    text-align: center;
    }

.sm-user-ui .sm-gallery-cover[data-show-buy="true"][data-show-download="true"] .sm-gallery-cover-info, 
.sm-user-ui .sm-gallery-cover[data-show-buy="true"][data-show-slideshow="true"] .sm-gallery-cover-info {
    padding-right: 0;
    }

JDGS

It worked perfectly, thank you very much!

JDGS

@Hikin' Mike said:
Replace the code I posted earlier and use this. It just adds a few more lines to the original CSS I posted and a new set of lines:

.sm-user-ui .sm-gallery-cover .sm-gallery-cover-title {
  color: red;
  font-size: 120%;
  max-width: 100%;
  text-align: center;
  }

.sm-user-ui .sm-gallery-cover[data-show-buy="true"][data-show-download="true"] .sm-gallery-cover-info, 
.sm-user-ui .sm-gallery-cover[data-show-buy="true"][data-show-slideshow="true"] .sm-gallery-cover-info {
  padding-right: 0;
  }

Recently I disabled the slideshow button in the gallery settings and the title moved a bit to the left:

Any idea how to center the title again? I already tried to change the "max-width" and "padding-right" but it didn't work.

Hikin' Mike

@JDGS said:

Any idea how to center the title again? I already tried to change the "max-width" and "padding-right" but it didn't work.

Add this:

.sm-user-ui .sm-gallery-cover[data-show-buy="true"] .sm-gallery-cover-info {
    padding-left: 204px;
    }

JDGS

@Hikin' Mike said:

@JDGS said:

Any idea how to center the title again? I already tried to change the "max-width" and "padding-right" but it didn't work.

Add this:

.sm-user-ui .sm-gallery-cover[data-show-buy="true"] .sm-gallery-cover-info {
  padding-left: 204px;
  }

Thank you, it worked