Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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.

Link to comment
  • Replies 4
  • Views 294
  • Created
  • Last Reply

Top Posters In This Topic

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

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
  • 2 weeks later...
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

Link to comment
  • Solution
23 hours ago, unhingedadventures 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>

 

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
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!

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.