style certain words in a slideshow title?

Is there a way to style (bold/color) certain words in a slideshow title?

I tried adding html tags in the text, and while it works within the squarespace editor, looking at the site it displays like this:




thanks in advance for any advice!

(This code for Gallery Block - Slideshow. If you use 7.1, please share link to page where you use slideshow, we can adjust code easier)

First, add this code to Settings > Advanced > code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".image-slide-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

Next, add b tag, same as your screenshot

thanks, @tuanphan - Sorry, i should have mentioned this in my original post, but I am using 7.1 . 
And for legal reasons, I can't share the page right now 😞

Any tips on how to do this in 7.1?

On 8/18/2022 at 9:02 PM, glenbeavis said:

thanks, @tuanphan - Sorry, i should have mentioned this in my original post, but I am using 7.1 . 
And for legal reasons, I can't share the page right now 😞

Any tips on how to do this in 7.1?

You can setup a trial site, setup slideshow, add b there then share url

or you can duplicate current site, remove all style, content, except slideshow, then share link

We can check easier

@tuanphan great idea- here's a duplicate site with everything else removed.

https://seahorse-piano-kgst.squarespace.com/

pw: password

thank you!

 

@tuanphan you're the best, thank you. That did it!

Hi there! May I ask what the solution for this was? I'm having the EXACT same problem changing the color of one individual word in a slideshow-banner title (squarespace 7.1). It looks great in edit mode but displays cryptic when looking at the site. 

Thanks!

16 hours ago, Diggy3768 said:

Hi there! May I ask what the solution for this was? I'm having the EXACT same problem changing the color of one individual word in a slideshow-banner title (squarespace 7.1). It looks great in edit mode but displays cryptic when looking at the site. 

Thanks!

Hi @tuanphan Can you let me know what you did to help @glenbeavis with the above? I'm having the exact same problem (squarespace 7.1).

1 hour ago, FijiAnni said:

Hi @tuanphan Can you let me know what you did to help @glenbeavis with the above? I'm having the exact same problem (squarespace 7.1).

Can you share link to page where you use slideshow?

12 hours ago, tuanphan said:

Can you share link to page where you use slideshow?

Yes! Here you go: 

Ultimate Fiji Vacations (squarespace.com) 

pswrd: Fiji2022'

12 hours ago, FijiAnni said:

Yes! Here you go: 

Ultimate Fiji Vacations (squarespace.com) 

pswrd: Fiji2022'

For List under this text? Latest Specials & Fiji Packages.

5 hours ago, tuanphan said:

For List under this text? Latest Specials & Fiji Packages.

No, for the title on the banner-slideshow on top of the page. I would like the word ULTIMATE to be bold and yellow. I used the following code (but deleted it again for now as it didn't display the way I wanted after leaving the edit mode. I can add it again if there is a way to make it display correctly when looking at the actual page).

Your <b><font color="#FFE91D">ULTIMATE</b></font color> South Pacific Specialist for over 30 years

19 hours ago, FijiAnni said:

No, for the title on the banner-slideshow on top of the page. I would like the word ULTIMATE to be bold and yellow. I used the following code (but deleted it again for now as it didn't display the way I wanted after leaving the edit mode. I can add it again if there is a way to make it display correctly when looking at the actual page).

Your <b><font color="#FFE91D">ULTIMATE</b></font color> South Pacific Specialist for over 30 years

First, change it to this

Your <span style="color:#FFE91D;">ULTIMATE</span> South Pacific Specialist for over 30 years

Next, add this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

9 minutes ago, tuanphan said:

First, change it to this

Your <span style="color:#FFE91D;">ULTIMATE</span> South Pacific Specialist for over 30 years

Next, add this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

 

Amazing! Thank you!!