Jump to content

Changing font of Gallery Block caption

Go to solution Solved by tuanphan,

Recommended Posts

Hi guys!

I am using the BRINE template, and need some help with the tweaks on the Gallery Block slideshow. I'd like to change the font sizes on the title and description that shows up on a hover on the captions. I tried injecting custom css into the page itself but it is not working. I used the code:

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-only-title { font-size: 10px !important; }

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-only-description{ font-size: 5px !important; }

I'd like the font change for the slideshow to only be applicable on the homepage. I want it to be much smaller than the "body" font used.
Wondering if anyone has a better solution.


Is it possible to restrict the size of the caption overlay as well?

Many thanks in advance!
Neptina

Community forum question 08062020.png

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

So, I managed to find a tweak that works! Inserted this into the homepage's individual CSS.
Found this code here:

<style>
 .sqs-gallery-block-slideshow .meta .meta-title {
font-size: 10px;

}

 .sqs-gallery-block-slideshow .meta .meta-description p {
font-size: 8px;

}
}</style>

 

That being said, still trying to figure out how to change the size of the caption box (that hovers to appear) on the slideshow!

 

Link to comment
  • Solution

Add to Home > Design > Custom CSS

.slide:hover .meta * {
    color: red !important;
    font-family: monospace !important;
    font-size: 20px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

The code works perfect! I am able to change the size of the caption box bigger.
However I can't change a side to be smaller. I tried using -20px to make the left side shorter but it doesn't seem to work.

.slide:hover .meta {
    padding: 10px 10px 10px -20px !important;
}

Is it possible to move the caption box to the left most bottom corner as well?

Community forum question 09062020.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.