Style 7.1 Gallery Captions

if the font exist, this code should work

p.gallery-caption-content {
    font-family: LTC-Bodoni-175 !important;
}

Which position? Can you describe in detail.

This code will move text over images (overlay)

figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
}

I think she wants to center the captions  in relation to each image inside the gallery. At least this is what I've been wanting to do for a couple of days.
Using tuanphan code, I managed to increase the caption's size and its weight, but I still can't centralize it. Text-align: center did not work for me.

figcaption.gallery-caption.gallery-caption-grid-simple {
p {
  font-size: 110%;
  font-weight: 500;
  }
}

@tuanphan @jhmarsolla Thanks for your help, y'all.

I'm personally trying to center it, which I was able to do with your help. But the biggest thing I'm trying to do is switch the font family to the following. When I add it into your code, nothing happens. Would it need a separate callout?

      font-family: ltc-bodoni-175 !important;

font-family: ltc-bodoni-175;
font-weight: 500;
font-style: normal;
letter-spacing: 0em;
text-transform: none;

1 hour ago, kindandbrave said:

@tuanphan @jhmarsolla Thanks for your help, y'all.

I'm personally trying to center it, which I was able to do with your help. But the biggest thing I'm trying to do is switch the font family to the following. When I add it into your code, nothing happens. Would it need a separate callout?

      font-family: ltc-bodoni-175 !important;

font-family: ltc-bodoni-175;
font-weight: 500;
font-style: normal;
letter-spacing: 0em;
text-transform: none;

 

Can you share how you managed to center the captions? I haven't been able to do that yet.

@jhmarsolla That !important; tag isn't overriding the normal gallery caption text. Below is the code to center.

figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute;
    text-align: center;
}

Thanks @kindandbrave! That helped a lot.

Anyone know how to switch the font family to LTC-Bodoni-175? When I add it into the codes listed above, nothing happens. Would it need a separate call-out?

@kindandbrave do you have this font added to your site? Do you have the font file or are you using something like Adobe Fonts?

LTC-Bodoni-175 is a font already supported within the Squarespace Design panels.

@tuanphan

how do you make the text in the center of the image?

currently it's at the bottom of the image and I would like it totally centered (up and down, left and right)

On 11/16/2020 at 4:44 PM, jonongec said:

@tuanphan

how do you make the text in the center of the image?

currently it's at the bottom of the image and I would like it totally centered (up and down, left and right)

Can you share link to page where you use gallery? We can check easier

https://www.jonathanong.com/

Currently I'm using this code

}
figcaption.gallery-caption.gallery-caption-grid-strips {
    position: absolute;
    top: 42%; 
    left: 50%;
    bottom: 0;
    background: rgba(0,0,0,0.0);
    color: white;
    left: 0;
    text-align: center;
}
p.gallery-caption-content {
  font-size: 120% !important;
}

I'm finding the captions sometimes centered, sometimes not.

Also top : 42% seems more centered than 50% for some reason.

Basically I just want the caption in the absolute center of the image.

And also if you have code for making the whole image and caption to be able to be clicked through. Currently you can't click on the caption but can click on the rest of the photo.

May I know where should I enter the codes? I need this too. Thank you. 

On 11/28/2020 at 9:06 AM, WengKien-IC said:

May I know where should I enter the codes? I need this too. Thank you. 

 

Design > Custom CSS