How to change the color of a single word in the title of a gallery portfolio page?

Site URL: https://www.brigittematte.com/galerie

Hi there,

I'm using Squarespace 7.1 and I would like to change the color of a single word in the title of the gallery portfolio page. I managed to change the color of all titles with CSS code (see ref.picture) but I would like to apply this to all « vendue » word in that page. Is it possible to do that?

Thanks!

Site url : https://www.brigittematte.com/galerie

password : bridg_vip

First, add this code to Design > Custom CSS

h3.portfolio-title span {color:red !important;}

Next, edit title to this

Laurentides, St-Donat, Pimbina — <span>Vendue</span>

Thank you for your help. So if I understand correctly, After adding the code , I should edit the title in this section? see ref. picture. If so, it's not working 😞

Can you add span tag & CSS above? We can check easier

This is my first site, I can add custom CSS, but unfortunately I don't know how to add span tag.

16 hours ago, Clodita said:

This is my first site, I can add custom CSS, but unfortunately I don't know how to add span tag.

 

You do in screenshot. I mean keep it & don't delete, we can check why it doesn't work easier

ok, I kept it 

 https://www.brigittematte.com/galerie

22 hours ago, Clodita said:

ok, I kept it 

 https://www.brigittematte.com/galerie

ah okay, edit title to this, then let me know. I will give new code

Laurentides, St-Donat, Pimbina | Vendue

ok done!

Hi, Do you have a new code? LMK 🙂  thanks!

On 5/6/2021 at 5:22 AM, Clodita said:

Hi, Do you have a new code? LMK 🙂  thanks!

 

Change | to #, and add this code to Code Injection Footer

<script>
  window.Squarespace.onInitialize(Y, () => {
  var title = document.querySelectorAll('.portfolio-title');
  for (var sf = 0; sf < title.length; ++sf) {
    var item = title[sf]; 
    item.innerHTML = item.innerText.replace(/#/g, '<br>');
  }
}); 
</script>

Code by Sf.digital. https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles