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

Ryncwn

Hi @"Hikin' Mike"
thanks for your help with this code. I tried it and am so happy that after years of stressing about not being able to adjust the header of a gallery, I have finally found out how to do something about it. I am however having to add it to every gallery individually, as adding it to the main theme CSS does nothing. I've actually found this to be the case with quite a few of the CSS codes I've tried to use. I don't suppose anyone has an idea of what may be causing this?
Thank you in advance.

Hikin' Mike

@Ryncwn said:
Hi @Hikin' Mike
thanks for your help with this code. I tried it and am so happy that after years of stressing about not being able to adjust the header of a gallery, I have finally found out how to do something about it. I am however having to add it to every gallery individually, as adding it to the main theme CSS does nothing. I've actually found this to be the case with quite a few of the CSS codes I've tried to use. I don't suppose anyone has an idea of what may be causing this?
Thank you in advance.

Can you please post your site. The code I posted originally above works fine in the site-wide theme section.

Ryncwn

> @"Hikin' Mike" said:
> Can you please post your site. The code I posted originally above works fine in the site-wide theme section.

Thanks Mike. I can share my site but I'm not sure how it would help. I have never actually had any root galleries on public display in my website for the sole reason that I didn't like the text. Instead, as a workaround I have always created pages and then inserted a Text header and gallery. So if you look at my portfolio galleries, those are all pages with galleries embedded. www.ryancowan.com
I would have to share an internal gallery for you to see that it has had any effect.
Yes, I have the code added to my sitewide CSS within the Theme's advanced panel window but it somehow doesn't have an effect on the galleries unless I paste it to an individual gallery page.

Hikin' Mike

@Ryncwn said:
Thanks Mike. I can share my site but I'm not sure how it would help. I have never actually had any root galleries on public display in my website for the sole reason that I didn't like the text. Instead, as a workaround I have always created pages and then inserted a Text header and gallery. So if you look at my portfolio galleries, those are all pages with galleries embedded. www.ryancowan.com
I would have to share an internal gallery for you to see that it has had any effect.
Yes, I have the code added to my sitewide CSS within the Theme's advanced panel window but it somehow doesn't have an effect on the galleries unless I paste it to an individual gallery page.

I guess I don't understand your problem then. The code was for galleries, but you can't show me those.

To add: If your trying to change your Pages with embedded galleries, then you need different code.

Ryncwn

@Hikin' Mike said:

@Ryncwn said:
Thanks Mike. I can share my site but I'm not sure how it would help. I have never actually had any root galleries on public display in my website for the sole reason that I didn't like the text. Instead, as a workaround I have always created pages and then inserted a Text header and gallery. So if you look at my portfolio galleries, those are all pages with galleries embedded. www.ryancowan.com
I would have to share an internal gallery for you to see that it has had any effect.
Yes, I have the code added to my sitewide CSS within the Theme's advanced panel window but it somehow doesn't have an effect on the galleries unless I paste it to an individual gallery page.

I guess I don't understand your problem then. The code was for galleries, but you can't show me those.

To add: If your trying to change your Pages with embedded galleries, then you need different code.

Sorry for the confusion Mike. I know the code is for galleries. I was just trying to explain that my website does not currently show galleries on the front end and so looking at my website may not help you. Here's a random backend gallery for you to view. I would like to use galleries on the front end instead of the pages I'm currently using. Perhaps some other CSS I'm already using is conflicting with this code. Not to worry. I can live with it and keep doing work arounds.
Thanks again, Mike.

Hikin' Mike

@Ryncwn said:
Perhaps some other CSS I'm already using is conflicting with this code. Not to worry. I can live with it and keep doing work arounds.
Thanks again, Mike.

It was a missing closing bracket and a empty comment tag upstream from the Gallery code here:

/*Adding Phone number to the standard SmugMug contact form*/
.sm-contact-pro-form:before {
  content: "email: info@ryancowan.com  Ph: 07902759928" !important; /*This is where your text and phone number goes*/
  margin-left: 20px; /*This is a left margin to align the text with the rest of the form*/
  font-weight: normal;  /*This code will make the phone number text bold*/
  font-family: 'SmugMug Icon Font Regular';
  font-size: 14px;
  width: 38px;
  line-height: 20px;  
  color: #34363a;  /*This will change the phone number text*/  
  /**

I removed the empty comment tag and added the closing bracket. Now it should work as planned:

/*Adding Phone number to the standard SmugMug contact form*/
.sm-contact-pro-form:before {
  content: "email: info@ryancowan.com  Ph: 07902759928" !important; /*This is where your text and phone number goes*/
  margin-left: 20px; /*This is a left margin to align the text with the rest of the form*/
  font-weight: normal;  /*This code will make the phone number text bold*/
  font-family: 'SmugMug Icon Font Regular';
  font-size: 14px;
  width: 38px;
  line-height: 20px;  
  color: #34363a;  /*This will change the phone number text*/
}

Those missing brackets really tend to mess things up.

Ryncwn

@Hikin' Mike said:

@Ryncwn said:
Perhaps some other CSS I'm already using is conflicting with this code. Not to worry. I can live with it and keep doing work arounds.
Thanks again, Mike.

It was a missing closing bracket and a empty comment tag upstream from the Gallery code:
I removed the empty comment tag and added the closing bracket. Now it should work as planned:
Those missing brackets really tend to mess things up.

Ah Excellent! Your sharp eye saves the day again. Thank you so much Mike. That has solved all the issues I was experiencing.