LA-Design
-
Posts
6 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by LA-Design
-
-
Thanks, I removed that code from the 'code injection' area. Should I also removed this from the 'Custom CSS' area?
.gallery-caption p {white-space:pre; text-align:center !important} .gallery-caption p:first-line {color: black; font-weight:bold !important}
Thank you!
-
Thanks, I tried it but it doesn't work for the lightbox captions.
-
oops! Thanks. Here it is:
password: gallerytest
URL: https://rectangle-poodle-8dp4.squarespace.com/gallery-1 -
I'm working on a client site. I found code to display captions in the lightbox instead of in the gallery grid. My client wants the caption to be styled more. Is there a way to style the caption text? I tried CSS and tried to add line breaks, but it isn't working for me. I want the title to be bolded and on the top line, then the other info below. I attached a screenshot of an image in the lightbox. My client's site is still set to private. I've tried various CSS I've found online but it isn't working for the lightbox caption. Thanks for any tips!
I set up a SquareSpace trial site to test this.
password: gallerytest
URL: https://rectangle-poodle-8dp4.squarespace.com/gallery-1Here's the code to get the gallery captions styled, it works until I have caption for lightbox only:
.gallery-caption p {white-space:pre; text-align:center !important} .gallery-caption p:first-line {color: black; font-weight:bold !important}
Then I found and added this to get the captions to show in lightbox only (client request):
<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: gray; font-weight: bold; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -65px; z-index: 9999; } .lightbox-caption p { white-space:pre; font-weight: normal!important; text-align:center!important; } .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; } .gallery-caption p.gallery-caption-content { display: none !important; } </style>
In the gallery, the caption has a soft return after the title
Lightbox Caption styling?
in Site Design & Styles
Posted
I took that CSS out just in case that's better. Thanks!