How to automatically have all image captions on a site use Paragraph 3 style?

Every time I add an image to my blog, I also add a caption. However, I need to manually change the caption to be center aligned and also use Paragraph 3 styling (the default settings for captions are left align and Paragraph 2).

I found a code to automatically center all captions that works:

// Auto-aligns text under images //
.image-caption p {text-align:center}

I just need to figure out what the code is to automatically use Paragraph 3 for all future image additions.

The only thing I have found online so far is writing out an entire style script for Paragraph 3 and adding in elements like font, font size, weight, color, etc. I already have all my Paragraph 3 elements set the way I want them in the SquareSpace Design settings, I just want the captions to now use that instead of rewriting all elements in manually.

Hi,

By default Paragraph 3 will have a special class sqsrte-small (or sqsrte-large). This class controls paragraph style. We can use Script code to add this class into Image Caption.

Can you share link to a page where you use Image? We can test code easier

On 2/15/2023 at 3:12 AM, tuanphan said:

Hi,

By default Paragraph 3 will have a special class sqsrte-small (or sqsrte-large). This class controls paragraph style. We can use Script code to add this class into Image Caption.

Can you share link to a page where you use Image? We can test code easier

Hello!

https://www.unhingedadventures.com/brazil/blog-post-title-two-ynkza

Password: hello

On 2/24/2023 at 10:36 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.image-caption p').addClass('sqsrte-small');
})
</script>

 

This worked! The change is only noticeable after you Save and are no longer in Edit mode  (adding this in case someone else is wondering). Thank you!