Buy me a coffee

Change colour of specific words in title of List Section Simple

To change color of specific word in List Section Simple Title, you can follow these.
#1. List Section Title
Suppose you need to change color of word “the Team”

Change Colour Of Specific Words In Title Of List Section Simple 7 Min

First, you need to find List Section ID.
In my example, it is:

section[data-section-id="66fdffe11312fe336b2ab908"]

 

Change Colour Of Specific Words In Title Of List Section Simple 2 Min

Next, make text “the Team” underline

Change Colour Of Specific Words In Title Of List Section Simple 3 Min

Next, use this code to Custom CSS box

section[data-section-id="66fdffe11312fe336b2ab908"] .list-section-title u {
    text-decoration: none !important;
    color: #f1f;
}

Change Colour Of Specific Words In Title Of List Section Simple 4 Min

Result

Change Colour Of Specific Words In Title Of List Section Simple 5 Min

#2. List Section: Item title
Suppose you need to change color of text “Monet”

F86c1e4c31e088bed1f1 Min

First, we will need to find List Section ID.
In my example, it is: section[data-section-id=”66fdffe11312fe336b2ab908″]

Change Colour Of Specific Words In Title Of List Section Simple 7 Min

Next, use this code to Code Injection > Footer

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

Change Colour Of Specific Words In Title Of List Section Simple 8 Min

Next, wrap word in <em> </em> tag

Change Colour Of Specific Words In Title Of List Section Simple 9 Min

Next, use this code to Custom CSS box

h2.list-item-content__title em {
  font-style: normal;
  color: #f1f;
  font-weight: 700;
}

Change Colour Of Specific Words In Title Of List Section Simple 10 Min