Jump to content

How to change lightbox font in summary block?

Recommended Posts

Hi! I would like to change the fonts on the lightbox caption overlay in a summary block to Open Sans, but have not found a solution. I am using the Hayden template in Squarespace 7.0 and am including a screenshot and a link to the website and sample page below:
 
 
Any advice or assistance is appreciated, thanks!

Screen Shot 2023-03-17 at 10.11.49 AM.png

Link to comment
  • Replies 3
  • Views 361
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 weeks later...

I have a question similar to the above. How can I change the font in the bottom caption here to be Rooney Sans Web? 

I currently have no custom CSS on my site, but am using the below code in my footer injection to display the lightbox captions:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.lightbox-caption {
    color: #5C5C5C;
    font-weight: none;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
}
.gallery-lightbox-wrapper:hover {
    cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
    display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
    display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
    display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
</style>

Screen Shot 2023-04-03 at 3.55.16 PM.png

Link to comment
On 4/4/2023 at 4:58 AM, Nudel said:

I have a question similar to the above. How can I change the font in the bottom caption here to be Rooney Sans Web? 

I currently have no custom CSS on my site, but am using the below code in my footer injection to display the lightbox captions:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.lightbox-caption {
    color: #5C5C5C;
    font-weight: none;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
}
.gallery-lightbox-wrapper:hover {
    cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
    display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
    display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
    display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
</style>

Screen Shot 2023-04-03 at 3.55.16 PM.png

What is site url? We can check font name code easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.